React道理及其事情流程

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.dispatchaction经由历程bindActionCreators举行绑定,再将返回的对象绑定到storeconnect函数会返回一个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对象,statePropsdispatchProps以及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 的一次流程完毕。

    原文作者:lxjjjjjj
    原文地址: https://segmentfault.com/a/1190000018333262
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞