react-redux提供了connect和provider两个好方式,provider将组件和redux关联起来,将store传给组件,组件通过dispatch发出action,store根据action的type属性,调用对应的reducer并传入state和这个action,reducer对state进行处理并返回一个新的state放入store,connect监听store发生变化,调用setState更新组件,此时组件的props也就跟着发生变化
connect,Provider,mapStateToProps,mapDispatchToProps,是react-redux提供的,redux本身和react没有关系,它只是数据处理中心,是react-redux让它们联系在一起。
redux由store,reducer,action组成
store是一个对象,它主要有四个方法
dispatch:用于action的分发,在creactStore中对dispatch进行改造,比如当action传入dispatch中会立即触发reducer,有时我们不希望立即触发,而是等待异步操作结束后触发,这时不是只能传入一个对象,而是能传入一个函数,在函数里我们dispatch一个action对象,实现了异步
subscribe:监听state的变化,这个函数调用dispatch时会注册一个listener监听state变化当我们需要知道state是否变化时可以调用,它返回一个函数,调用这个返回的函数可以注销监听,let unsubscribe=store.subscribe(()=>{console.log("state发生了变化")})
getState:
两个需要用到的地方:
1.获取store中的state,用action触发reducer改变了state时,并将数据传给reducer这个过程是自动执行的
2.利用subscribe监听到state发生变化后调用它来获取新的state数据
replaceReducer:
替换reducer,改变state修改的逻辑
store通过createStore()方法创建,接受三个参数,经过combineReducers合并的reducer和state初始状态以及改变dispatch的中间件,后两个参数不是必须的,store的主要作用是将action和reducer联系起来并改变state,
action
action是一个对象,其中type属性是必须的,同时可以传入一些数据,action可以用actionCreator进行创造,dispatch就是把action对象发送出去
reducer
reducer是一个函数,它接受一个state和一个action,根据action的type返回一个新的state根据业务逻辑可以分为多个reducer,然后通过combineReducers将它们合并,state中有很多对象,每个state对象对应一个reducer,
eg:
const reducer =combineReducers(
{
a:doSomethingWithA,
b:processB,
c:c
}
)
combineReducers:
其实它也是一个reducer,它接受整个state和一个action,然后将整个state拆分发送给对应的reducer进行处理,所有的reducer会收到相同的action,不过他们会根据action的type进行判断,有这个就进行处理然后返回新的state,没有就返回默认值,然后分散的state又会整合在一起返回一个新的state,
connect
connect(mapStateToProps,mapDispatchToProps,mergeProps,options)是一个函数,它接受
四个参数并且再返回一个函数,wrapWithConnect,wrapWithConnect接受一个组件作为参数,它的内部定义一个新组件,并将传入的组件作为Connect的子组件然后return回去。
完整写法:
connect(mapStateToProps,mapDispatchToProps,mergeProps,options)(component)
mapStateToProps(state,[ownProps])
1.mapStateToProps接受两个参数,store的state和自定义的props,
2.并返回一个新的对象,这个对象会作为props的一部分传入ui组件,
3.我们可以根据组件所需要的数据自定义返回一个对象,ownProps的变化也会触发mapStateProps
function mapStateToProps(state){
return {todos:state.todos};
}
mapDispatchToProps(dispatch,[ownProps])
1.mapDispatchToProps如果是对象,那么会和store绑定作为props的一部分传入ui组件
2.如果是个函数,它接受两个参数,bindActionCreators会将action和dispatch绑定并返回一个对象,这个对象会和ownProps一起作为props的一部分传入ui组件,
3.所以不论mapDispatchToProps是对象还是函数,它最终都会返回一个对象,如果是函数,这个对象的key值是可以自定义的。
4.mapDispatchToProps返回的对象属性其实就是一个个actionCeator,因为已经和dispatch绑定,所以当调用actionCreator时会立即发送action,而不是手动dispatch,
5.ownProps的变化也会触发mapDispatchToProps
mergeProps(tateProps,dispatchProps,ownProps)
将 mapStateToProps()和mapDispatchToProps()返回的对象和组件自身的props合并成新的props并传入组件,默认返回stateProps和dispatchProps的结果之和
options:
pure=true表示Connect容器组件将在shouldComponentUpdate中对store的state和ownProps进行浅对比,判断是否发生变化,优化性能,为false则不对比。
完整的React–Redux–React流程
一.Provider组件接受redux的store作为props,然后通过context往下传
二.connect函数在初始化的时候会将mapDispatchToProps对象绑定到store,
如果mapDispatchToProps是函数则在Connect组件获得store之后,
根据传入的store.dispatch和action通过bindActionCreators进行绑定,再将返回的对象绑定到store,connect函数会返回一个wrapWithConnect函数,
同时wrapWithConnect会被调用且传入一个ui组件,wrapWithConnect内部定义了一个Connect组件,传入的ui组件是Connect的子组件,
然后Connect组件会通过context获得store,并通过store.getState获得完整的state对象,将state传入mapStateToProps返回stateProps对象,
然后Connect组件会通过context获得store,并通过store.getState获得完整的state对象,将state传入mapStateToProps返回stateProps对象、mapDispatchToProps对象或mapDispatchToProps函数会返回一个dispatchProps对象,stateProps、dispatchProps以及Connect组件的props
三.
此时ui组件就可以在props中找到actionCreator,
当我们调用actionCreator时会自动调用dispatch,
在dispatch中会调用getState获取整个state,同时注册一个listener监听state的变化,
store将获得的state和action传给combineReducers,
combineReducers会将state依据state的key值分别传给子reducer,并将action传给全部子reducer,
reducer会被依次执行进行action.type的判断,如果有则返回一个新的state,如果没有则返回默认。
combineReducers再次将子reducer返回的单个state进行合并成一个新的完整的state。此时state发生了变化。
dispatch在state返回新的值之后会调用所有注册的listener函数其中包括handleChange函数,
handleChange函数内部首先调用getState获取新的state值并对新旧两个state进行浅对比,如果相同直接return,
如果不同则调用mapStateToProps获取stateProps并将新旧两个stateProps进行浅对比,如果相同,直接return结束,不进行后续操作。
如果不相同则调用this.setState()触发Connect组件的更新,传入ui组件,触发ui组件的更新,此时ui组件获得新的props,
react –> redux –> react 的一次流程结束。