标签: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