前端那些事之react--redux篇
前端那些事之react--redux篇
上官清偌 发表于8个月前
前端那些事之react--redux篇
  • 发表于 8个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 前端那些事之react--redux篇

react-redux

  • 下载:npm install --save react-redux
  •        npm install --save redux
    

一个简易的redux的实现

流程如下

输入图片说明

import React from 'react';
import {Provider,connect} from 'react-redux'
import {createStore,combineReducers} from 'redux'
const todo = function (state, active) {
    switch (active.type) {

    }
    return {
        name: 'todo-mvc',
        items: [{name: 'aa', active: false}, {name: 'bbb', active: true}]
    }
}
const fs = (state, active) => {
    switch (active.type) {

    }
    return {
        name: 'todo-mvc',
        items: [{name: 'aa', folder: false, ext: '.txt'}, {name: 'bbb', folder: true, ext: ''}]
    }
}

//合并redux
const reduce = combineReducers({
    todo,
    fs
})
//创建全局的redux
const store = createStore(reduce);

const A = React.createClass({
    render(){
        const {name,items} =this.props;
        const  nodes=items.map((obj,i)=>{
            // console.log(obj.name);
            return (
                <p key={i}>{obj.name}</p>
            )
        })
        return (
            <div>
                {nodes}
            </div>
        )
    }
})
//给store赋值属性的涵数
var fn1= (store)=>{
    return {
        name:store.todo.name,
        items:store.todo.items
    }
}
//连接器connext,连接store和视图之间的关系
const App=connect(fn1)(A);
const ReduxStudy = React.createClass({
    render(){
        return (
            <div>
                <Provider store={store}>
                    <App/>
                </Provider>
            </div>
        )
    }
})
export default ReduxStudy;
共有 人打赏支持
粉丝 10
博文 78
码字总数 83811
×
上官清偌
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: