简谈自己对redux的理解

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的理解

猜你喜欢