Redux 是目前 React 系统中最常用的数据管理工具，它落实并发扬了 Flux 的数据单向流动模式，被实践证明为一种成熟可用的模式。
尽管承受着一些非议，Redux 在 React 数据管理界的地位仍然没有被取代。我听到的针对 Redux 最多的非议是它需要遵守的规则和步骤太多，让人们觉得束手束脚。然而个人觉得这正是 Redux 的意思所在，项目大了，如果整体数据流动不遵守规则，就容易乱。数据单向流动模式配合 Redux 规范仍然是一个可行的方案，当然，完全拥抱 mutable 的 Mobx 和 Vuex 也有他们的优势，关于他们之间的对比这里暂且不多做介绍。今天我们的重点是制作我们自己的 Redux，从而深入了解它的思想和原理。
Redux 的主要思想是让系统中的数据按照统一的规则流动，这样所有的操作就都有迹可循，任何 View 上对系统数据状态的更改都要通过 Action 被 Dispatch 到 Store，通过 Reducer 定义的逻辑去更改 State，然后再去更新View。
我们可以看到 Redux 的核心是 Store，我们就从它入手来写自己的 Redux。Store 需要有 State，需要提供 Dispatch 方法来接收 Action，需要根据使用者提供的 Reducer 响应 Action，还要能够在 State 变化的时候通知到外部的观察者。我们先来看看典型的 Action 和 Reducer：
Action:
{
type: ADD_TODO,
text: 'Build my first Redux app'
}
Reducer:
function todoApp(state, action) {
switch(action.type) {
case ADD_TODO:
return Object.assign({}, state, {
todos: [
...state.todos,
{ text: action.text, completed: false }
]
})
default:
return state
}
}
我们可以看到，Action 是普通的对象，它需要有一个 type 属性来指示要做的动作类型，Reducer 是一个方法，接收当前的 State 和要做的 Action，定义逻辑给出新的 State。
通过应用闭包和观察者模式，我们的 Redux 核心 createStore 方法并不难写：
export default function(reducer) {
let state = undefined
let listeners = []
function subscribe(listener) {
listeners.push(listener)
return function unsubscribe() {
listeners.splice(listeners.indexOf(listener), 1)
}
}
function dispatch(action) {
state = reducer(state, action)
listeners.map(listener => listener())
}
function getState() {
return state
}
return { dispatch, subscribe, getState }
}
有了核心部分，接下来是如何让 View 也就是 React components 拿到 state，能够在 state 更新的时候被更新，以及能够使用 dispatch 方法来发出 Action 指令。Redux 需要使用者将 App 包裹在 Redux 的 Provider 中，提供自己创建的 Store 作为属性，再让使用者用 connect 来包裹 component 为它拿到 state 数据和 dispatch 方法：
const store = createStore(rootReducer)
ReactDOM.render((
<Provider store={store}>
<App />
</Provider>
), document.getElementById('root'))
function mapStateToProps(state) {
return { count: state.count }
}
function mapDispatchToProps(dispatch) {
return {
increment: () => dispatch({type: 'increment'})
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter)
为了让 Component Tree 中任何位置的 Component 都能接收到信息，我们需要 React Context 的帮助，我们的 Provider 将使用者生成的 Store 注入 Context，connect 方法为 Component 拿到相应 Context 中的 Store 信息。以前的 React Context 在 Context 更新时不能确保系统中所有对 Context 的引用都得到更新，详细情况可以参考 https://reactjs.org/docs/legacy-context.html#updating-context ，因而当时实现 State 更新的方式比较复杂，每个 Component 都需要独立订阅 Store。新的 React Context API 解决了 Context 更新问题，我们写起来也就容易了很多，只要在 Provider 中订阅更新就可以了：
Provider:
import React, { useState, useEffect } from 'react'
export const MyReduxContext = React.createContext()
export default function(props) {
const { store } = props
const [ provider, setProvider ] = useState({state: store.getState(), dispatch: store.dispatch})
useEffect(() => {
return store.subscribe(() => setProvider({state: store.getState(), dispatch: store.dispatch}))
})
return (
<MyReduxContext.Provider value={provider}>
{ props.children }
</MyReduxContext.Provider>
)
}
Connect:
import React from 'react'
import { MyReduxContext } from './Provider';
export default function(mapStateToProps, mapDispatchToProps) {
return function(WrappedComponent) {
return function(props) {
return (
<MyReduxContext.Consumer>
{
({ state, dispatch }) => {
return <WrappedComponent {...mapStateToProps(state, props)} {...mapDispatchToProps(dispatch, props)} />
}
}
</MyReduxContext.Consumer>
)
}
}
}
这里我们用到了 React Hooks 的 useState 和 useEffect，注意 state 和 dispatch 都需要被放在 Context 中传递。connect 方法的两个参数 mapStateToProps 和 mapDispatchToProps，正如他们的名字，是用来把 state 和 dispatch 转化成 Component 需要的样子。
Connect 方法是现在 Redux 提供的连接 Component 的方式，然而现在我们有了 React Hooks，是否有办法自定义 Hooks 来连接呢？借用 useContext 我们可以很简单地实现：
import { useContext } from 'react'
import { MyReduxContext } from './Provider'
export default function useStore() {
const { state, dispatch } = useContext(MyReduxContext)
return [ state, dispatch ]
}
使用时也很简单：
const [ state, dispatch ] = useStore()
const { count } = mapStateToProps(state)
const { increment, reset } = mapDispatchToProps(dispatch)
到此为止我们的 Redux 主流程工具已经完成，接下来我们来看 Redux 的重要概念 Middleware。Middleware是从 Redux 的流程规则中应运而生的，既然所有的 Action 都要流经 Store，那如果我们在 Store 中设置一个可插入的装置，就可以让人们根据需要加入各种管道方法，最常见的有记录日志，报告错误，异步请求处理和路由等。
这个装置需要将 middleware 们一个个插入到 Store 的 Dispatch 管道中，让 Action 一个个地流经他们，最后才被真正的 Dispatch 给到 Reducer。为了灵活可靠地完成这个任务，我们的 Redux 需要做很多让人头晕的工作，准备好迎接挑战了吗？
首先，为了将 middleware 们组合起来，我们需要将他们的流程逻辑嵌套在一起成为一个新的 Dispatch 方法，这就需要用到 Compose 方法。
d = compose(a, b, c) d(x) === a(b(c(x)))
我们的 middleware 如果长这样：
function middlewareWrapper(nextDispatch) {
return function(action) {
some logic ...
nextDispatch(action);
}
}
那么想象一下 compose(...middlewares)(store.dispatch) 会得到什么？带入上面的 compose 方法的定义仔细想一下。没错，就是 middleware 们内层函数的逻辑嵌套，等待被执行的一个新的 Dispatch 方法。
Compose 并不难实现，我们可以自己简单写一下。
function compose(...funcs) {
return function(...parameters) {
let returned = null
for (let i = funcs.length - 1; i >= 0; i --) {
let func = funcs[i]
if (i === 0) {
returned = func(...parameters)
} else {
returned = func(returned)
}
}
return returned
}
}
知道了如何嵌套 middleware，我们就可以着手改造我们的 createStore，将 middlewares 作为额外参数传入。
export default function createStore(reducer, middlewares) {
let listeners = []
function subscribe(listener) { }
function dispatch(action) {
state = reducer(state, action)
listeners.map(listener => listener())
}
function getState() { return state }
------
const storeContext = {
getState: getState,
dispatch: (action) => dispatch(action)
}
const chain = middlewares.map(middleware => middleware(storeContext))
dispatch = compose(...chain)(store.dispatch)
------
return { dispatch, subscribe, getState }
}
这里将 storeContext 传给 middleware 是希望它们能够拿到 store 的 state 和 dispatch，注意这里的 dispatch 指向的是嵌套后的新的 dispatch，既然多了一步 storeContext 的封装，middleware 们也就又多了一层包裹，最终变成这样：
function storeWrapper(store) {
function middlewareWrapper(nextDispatch) {
return function(action) {
some logic ...
nextDispatch(action)
}
}
}
到此为止 middleware 的内部机制我们已经做好了，可是 Redux 传入 middlewares 的方式并不是这样的，为了使用起来更灵活，Redux 提供了 applyMiddleware 方法，它接收 middlewares 作为参数，返回一个接收 createStore 参数的包装方法，将 createStore 包装为一个新的 createStore 方法，新的方法给出的 dispatch 方法就是嵌套好 middlewares 的新的 dispatch。
因而我们的 Provider 处可以写做：
<Provider store={applyMiddleware(loggerMiddleware, thunkMiddleware)(createStore)(counterReducer)}>
而从另一个角度，原有的 createStore 方法也支持接收 applyMiddleware 的返回值作为 enhancer 参数，而且还需要有另一个参数 preloadedState 作为 state 的初始值，最终就变成了：
<Provider store={createStore(counterReducer, preloadedState, applyMiddleware(loggerMiddleware, thunkMiddleware))}>
我们的 createStore 方法最终是这样的：
export default function createStore(reducer, preloadedState, enhancer) {
if (enhancer) {
return enhancer(createStore)(reducer, preloadedState)
}
------
let state = preloadedState
let listeners = []
function subscribe(listener) {
listeners.push(listener)
return function unsubscribe() {
listeners.splice(listeners.indexOf(listener), 1)
}
}
function dispatch(action) {
if (typeof action !== 'object') {
return;
}
state = reducer(state, action)
listeners.map(listener => listener())
}
function getState() {
return state
}
return { dispatch, subscribe, getState }
}
applyMiddleware 是这样的：
export default function applyMiddleware(...middlewares) {
return function(createStore) {
return function(reducer, preloadedState, enhancer) {
const store = createStore(reducer, preloadedState, enhancer)
// this dispatch used in storeConotext should point to the final dispatch,
// or else middlewares will use the real store's dispatch which skips middlewares
let dispatch = store.dispatch
const storeContext = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
const chain = middlewares.map(middleware => middleware(storeContext))
dispatch = compose(...chain)(store.dispatch)
// purpose of applyMiddleware is to make a enhanced dispatch which can walk through middlewares
return {
...store,
dispatch
}
}
}
}
这里多次应用了类似 React HOC 的包装思想，让整个设计灵活巧妙，但是从某种程度上增加了理解的难度，让我想到 Redux Saga 的巧妙设计和最初的难以理解。
看这部分时如果有细节不清楚还可以参考 Redux 官方对于 applyMiddleware 的介绍。
有了 applyMiddleware，接下来让我们写一下两个最常用的 middleware —— logger 和 thunk。
初步的 logger 非常简单，就是增加一个 console 的逻辑：
export default function loggerMiddleware(storeContext) {
return function(nextDispatch) {
return function(action) {
nextDispatch(action)
console.log(storeContext.getState())
}
}
}
注意，我们把 console.log 放在 nextDispatch 的后面，是希望它拿到此次 dispatch 之后的 state，当然也可以将之前的记录下来在后面一起 console 出来，就更接近真正的 Redux logger 的做法了。
Redux thunk 是要让 dispatch 接受 Action Creator 作为参数，详细内容可以参考 https://github.com/reduxjs/redux-thunk#why-do-i-need-this ，它的实现也很简单，只要做一个类型判断就可以了：
export default function thunkMiddleware(storeContext) {
return function(nextDispatch) {
return function(action) {
if (typeof action === 'function') {
const { dispatch, getState } = storeContext
action(dispatch, getState)
nextDispatch(action)
} else {
nextDispatch(action)
}
}
}
}