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文档
原文地址:https://www.cnblogs.com/zhangjixiang123/p/10048972.html