React里父子组件可以通过props通信,兄弟组件通信需要把数据传递给父组件,再由父组件传递给另一个子组件。以兄弟组件通信为需求,写一个Redux。
问题
兄弟组件通信
首先分析这个需求,点击button,改变数字,Number组件重新渲染。
可抽象为,派发一个动作,改变状态,执行方法。
根据上两步分析,可以看出组件通信的核心是动作(action)、执行方法(reducer)、状态(state)
action、reducer
store是个对象,负责提供getState、dispatch、subscribe三个方法。
Number、Counter组件
Redux
上面实现了兄弟组件的通信,但是复用性差,而且store里的listeners不应该被外界修改。
createStore,这就是Redux里创建store的方法。
调用createStore,传入reducer,返回和上一步骤一样的store。
redux里的三大原则:只有一个store;state是只读的,只有触发action才能改变;使用纯函数修改。我们写自己的redux时也要遵循这些原则。
多个reducer
由于store只有一个,所以对于多个reducer时,要把reducer合并。
调用combineReducers,参数是对象,对象的key可以是reducer的名字,value是reducer,返回一个函数,把函数传给createStore,创建store。
简化组件里派发动作
我们在派发action的时候,需要
这样比较麻烦,如果把action直接放在实例上,会比较方便。
先实现actions
再实现bindActionCreators
React-Redux
上面代码里可以看出组件里的许多代码是重复的,可以进一步抽象组件,最后抽象成React-Redux。
React-Redux里要实现一个外层组件,负责传递store和渲染子组件,功能比较简单
还要实现一个高阶组件,高阶组件先返回一个函数,最后返回一个组件。高阶组件负责把store上的state和dispatch作为props传递给需要渲染的组件,还有实现生命周期函数里的公共功能。
首页渲染
Counter、Number组件
redux中间件
最后实现redux中间件。Redux中间件是洋葱模型,和Koa的中间件原理一样。
开发中会有多个中间件,中间件是函数,要把第一个中间件的结果作为参数传递给第二个中间件,依次执行,先实现这个compose函数
应用中间件函数applyMiddleware
使用中间件,修改store
总结
Redux是管理页面状态和数据传递,从最开始组件通信的问题,一步步的实现类似一个Redux的库,方便我们学习Redux和理解Redux原理。
领取专属 10元无门槛券
私享最新 技术干货