码迷,mamicode.com
首页 > 其他好文 > 详细

简谈自己对redux的理解

时间:2018-12-01 15:31:35      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:super   one   使用   cer   reducer   是什么   struct   vue   bsp   

redux描述
        首先redux 有3大组成部分 1.store2. action .3reducer  还有边外的 components, 如何触发action 呢?首先的拿到store对象,store对象是通过 redux中的createStore()创建的,他有两个参数,第一个是reducer, 第二个是一个可以装在处理异步的applyMiddleware()  applyMiddleware 也是从redux 中导入, 它里面的参数是个redux-thunk ,当我们创建了这个 store对象, 在组件中 做dispatch 去派发一个action 他包含了两个重要的数据一个是 action的类型 一个是payload 这个action一旦派发,注册在store里面的reducer 会自动运行 所以我们在创建store的时候要创建一个reducer ,reducer是什么呢? 他就是一个纯函数,它用来返回一个新的状态,那么他什么时候执行呢 ,这是就需要action 告诉他 通过那个action.type, 最重要的是reducer必须返回一个最新的状态 这时我们就引入了immutable 然后通过subscribe函数做个订阅 这时我们才知道这个state已经更新了 但是我们做项目时一般和react-redux联合使用
通过 react-redux 中的 provider 将store总分支注入根组件,其原理就是所谓的context源码如下
export function createProvider(storeKey = store, subKey) {
......
class Provider extends Component {
    getChildContext() {
        return { [storeKey]: this[storeKey], [subscriptionKey]: null }
    }
    constructor(props, context) {
        super(props, context)
        this[storeKey] = props.store;
    }
 
    render() {
        return Children.only(this.props.children)
    }
}
}

 

,然后通过react-redux的connect使其组件可以访问到store 因为redux和react没有直接的关系 不像vue和vuex那样基情满满,connect有四个参数分别是
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
第一个参数:允许我们把store中的数据作为props绑定到组件上,只要store更新了就会调用这个方法。例子如下
const mapStateToProps = (state) => {
    return ({
        count: state.counter.count
    })
}
第二个参数:允许我们将action作为props绑定到组件中,例子如下
const mapDispatchToProps=(dispatch)=>{
        return {
            xx(xinxi){
            dispatch({type:join,xinxi})
            }
        }
    }

export default connect(mapStateToProps, mapDispatchToProps)(yourComponent)
后两个参数基本上也做项目的时候也没接触过  想了解可以参考api文档 

简谈自己对redux的理解

标签:super   one   使用   cer   reducer   是什么   struct   vue   bsp   

原文地址:https://www.cnblogs.com/zhangjixiang123/p/10048972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!