实现redux

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原理。