每一种新语言，新框架或者工具的出现都是为了解决项目中存在的问题。

动机

随着 Javascript 单页应用的开发越来越复杂，管理不断变化的 state 变得非常困难。这些状态有很多：UI 状态，服务器数据，缓存数据等。而组件，页面之间状态共享也是一个问题。

在 React 中，数据在组件中是单向流动的，数据从父组件传递给子组件是通过 props，由于这个特征，两个非父子关系的组件（或叫兄弟组件）之间的通信就比较麻烦。

Redux 的出现正式是为了解决 state 数据的管理问题。

设计思想

Redux 将整个应用的状态都存储在一个地方，就是 Store（容器），里面保存着应用的 state（状态树），组件可以通过 dispach（派发）action（行为）给 store（状态容器），而不是直接通知其他组件。其他组件可以通过订阅 store 中的 state（状态）来更新视图。

三大原则

写 Redux 需要遵循三个原则，有制约，有规则，状态才会可预测。因此 Redux 需要遵循以下三个原则：

单一数据源

整个应用的 state 被储存在一棵 Object tree 中，并且这个 Object tree 只存在于唯一一个 store 中；

State 是只读

State 是只读的，惟一改变 state 的方法就是dispatch（触发） action（动作）；

使用纯函数来执行修改

通过 disptch action 来改变 state，action 是一个用于描述已发生事件的普通对象，使用纯函数（没有副作用的函数：函数的输出完全取决函数的参数；副作用：获取网络请求数据，修改 dom 标题等都属于副作用）来执行修改，为了描述 action 如何改变 state tree ，需要编写 reducer （处理器）。

单一数据源的设计让组件之间的通信更加方便，同时也便于状态的统一管理。

基本使用

通过一个 React 计数器组件来使用一下，新建一个项目，删除多余的文件，启动：

npx create-react-app redux-family
cd redux-family
npm install redux -S
npm start

编写一个 Counter 组件，应用 redux ：
通过使用createStore来创建一个srore仓库，参数就是reducer和初始 state，通过 store.getState()方法获取状态，store.dispatch来派发动作，store. subscribe订阅更新，store.unsubscribe取消订阅，这些基本就是 redux 的全部了：

// src/components/Counter1.js
import React, { Component } from 'react';
import { createStore} from 'redux';

const INCREMENT = 'ADD';
const DECREMENT = 'MINUS';

const reducer = (state = initState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { number: state.number + 1 };
    case DECREMENT:
      return { number: state.number - 1 };
    default:
      return state;
    }
}

let initState = { number: 0 };

const store = createStore(reducer, initState);

export default class Counter extends Component {
    unsubscribe;
    constructor(props) {
      super(props);
      this.state = { number: 0 };
    }
    componentDidMount() {
      this.unsubscribe = store.subscribe(() => this.setState({ number: store.getState().number }));
    }
    componentWillUnmount() {
      this.unsubscribe();
    }
    render() {
      return (
        <div>
          <p>{this.state.number}</p>
          <button onClick={() => store.dispatch({ type: 'ADD' })}>+</button>
          <button onClick={() => store.dispatch({ type: 'MINUS' })}>-</button>
          <button onClick={
            () => {
                setTimeout(() => {
                    store.dispatch({ type: 'ADD' });
                }, 1000);
            }
          }>1秒后加1</button>
        </div>
      )
    }
}

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Counter1 from './components/Counter1';

ReactDOM.render(
  <Counter1 />,
  document.getElementById('root')
);

结合 React 框架 react-redux

react-redux 用来整合 react 状态和数据订阅，使其使用起来更简便。提供 Provider使所有组件都可以获取状态，connect联接状态和组件，获取state状态，dispatch派发动作：

npm install react-redux -S
npm start

// src/components/Counter2.js
import React, { Component } from 'react';
import { connect } from 'react-redux'

class Counter extends Component {
    render() {
      return (
        <div>
          <p>{this.props.number}</p>
          <button onClick={() => this.props.add()}>+</button>
          <button onClick={() => this.props.minus()}>-</button>
          <button onClick={
            () => {
                setTimeout(() => {
                  this.props.add({ type: 'ADD' });
                }, 1000);
            }
          }>1秒后加1</button>
        </div>
      )
    }
}
const mapStateToProps = (state) => {
  return {
    number: state.number
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    add: () => dispatch({type: 'ADD'}),
    minus: () => dispatch({type: 'MINUS'})
  };
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore} from 'redux';
import { Provider } from 'react-redux'
import Counter2 from './components/Counter2'

const INCREMENT = 'ADD';
const DECREMENT = 'MINUS';

const reducer = (state = initState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { number: state.number + 1 };
    case DECREMENT:
      return { number: state.number - 1 };
    default:
      return state;
    }
}

let initState = { number: 0 };

const store = createStore(reducer, initState);

ReactDOM.render(
  <Provider store={store}>
    <Counter2 />
  </Provider>,
  document.getElementById('root')
);

不仅仅使用在 React 上

Redux 是一个状态数据流管理方案，不是为了 react 单独实现的，可以使用在任何框架以及原生 Javascript 中，这更体现了 Redux 的广阔的视角和先进的思想。

下面在原生 Javascript 应用中使用如下：
需要修改下 index.html，增加显示数据的 dom，以及操作按钮的 dom：

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="counter">
      <p id="number">0</p>
      <button id="add">+</button>
      <button id="minus">-</button>
    </div>
  </body>
</html>

index.js文件中通过订阅渲染函数来做数据的更新：

// src/index.js
import { createStore} from 'redux';

let counterValue = document.getElementById('number');
let incrementBtn = document.getElementById('add');
let decrementBtn = document.getElementById('minus');

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
let initState = { number: 0 };

const reducer = (state = initState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { number: state.number + 1 };
    case DECREMENT:
      return { number: state.number - 1 };
    default:
      return state;
  }
}

let store = createStore(reducer);

function render() {
  counterValue.innerHTML = store.getState().number;
}

store.subscribe(render);

render();

incrementBtn.addEventListener('click', function () {
  store.dispatch({ type: INCREMENT });
});
decrementBtn.addEventListener('click', function () {
  store.dispatch({ type: DECREMENT });
});

以上就是Redux的基本应用，学会使用一个框架很快，但是不能仅限于使用，还要知道其内部的实现原理，下面就一起来写一个具有简单功能的模仿的 redux。

脱离框架的简单实现（源码）

createStore 创建仓库

从使用中可以看出，redux需要返回一个createStore方法，这个方法返回一个对象，对象上有getState()，dispatch，subscribe方法，getState()返回最新的state，dispatch需要派发action，subscribe需要订阅更新函数并返回一个取消订阅的函数。redux内部需要先派发一次INIT动作来填充初始状态。如此分析下来，这样一个redux壳就有了，先来写壳，再往里面填充功能：
redux/index.js

import createStore from './createStore.js'

export {
  createStore
}

redux/utils/ActionType.js

/**
 * These are private action types reserved(保留的) by Redux.
 * For any unknown actions, you must return the current state.
 * （所有未知的action都必须返回当前的state）
 * If the current state is undefined, you must return the initial state.
 * （如果当前state是undefined，必须返回和一个初始的state）
 * Do not reference these action types directly in your code.
 * （不要在代码中直接引入这些action type）
 */

const randomString = () => {
  return Math.random().toString(36).substring(7).split('').join('.')
}

const ActionTypes = {
  INIT: `@@redux/INIT${randomString()}`
}

export default ActionTypes

redux/createStore.js

import ActionType from './utils/ActionType'

function createStore(reducer, preloadedState) {
  let currentState = preloadedState || {}
  let currentReducer = reducer
  let currentListeners = []

  const getState = () => {
    return currentState
  }
  const dispatch = (action) => {
    
  }

  const subscribe = (listener) => {
    return function unsubscribe() {
    }
  }

  // 内部需要先派发一次动作
  // When a store is created, an "INIT" action is dispatched so that every
  // reducer returns their initial state. This effectively populates(填充)
  // the initial state tree.

  dispatch({type: ActionType.INIT})

  return {
    getState,
    dispatch,
    subscribe,
  }
}

export default createStore

这样的壳子就写好了，现在填充功能，订阅函数需要收集所有的订阅事件存储到数组中，并返回一个取消订阅的函数；
dispatch派发action给reducer获取最新的状态，最后通知所有的订阅组件（这里是更新函数）；

const subscribe = (listener) => {
    currentListeners.push(listener)
    // 返回取消订阅的函数
    return function unsubscribe() {
      const index = currentListeners.indexOf(listener)
      // 取消订阅就是将这个订阅事件从数组中删除
      currentListeners.splice(index, 1)
    }
  }
const dispatch = (action) => {
    // reducer:传入旧的状态和action，返回新的state
    currentState = currentReducer(currentState, action)

    const listeners = currentListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      // 执行每一个订阅函数
      listener()
    }
    return action
  }

这样基本的redux功能就实现完了，将原生 Javascript 应用改成自己实现的redux，功能依然正常。

bindActionCreator

使用action creator直接派发动作，不直接调用 dispatch，这是一种更便捷的方法。bindActionCreator 将action creator 转换为带有相同key，但是每个函数都包含dispatch调用。

将之前直接在 react 中使用 redux 的例子重新改写一下，使用 bindActionCreator 重写一下实现：

import React, { Component } from 'react';
import { createStore, bindActionCreators} from 'redux';

const INCREMENT = 'ADD';
const DECREMENT = 'MINUS';

const reducer = (state = initState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { number: state.number + 1 };
    case DECREMENT:
      return { number: state.number - 1 };
    default:
      return state;
    }
}

+ function Add() {
+  return { type: INCREMENT }
+}
+function Minus() {
+  return { type: DECREMENT }
+}

let initState = { number: 0 };
const store = createStore(reducer, initState);
+ const actions = { Add, Minus }
+ const boundActions = bindActionCreators(actions, store.dispatch)


export default class Counter extends Component {
    unsubscribe;
    constructor(props) {
      super(props);
      this.state = { number: 0 };
    }
    componentDidMount() {
      this.unsubscribe = store.subscribe(() => this.setState({ number: store.getState().number }));
    }
    componentWillUnmount() {
      this.unsubscribe();
    }
    render() {
      return (
        <div>
          <p>{this.state.number}</p>
+           <button onClick={boundActions.Add}>+</button>
+           <button onClick={boundActions.Minus}>-</button>
          <button onClick={
            () => {
                setTimeout(() => {
+                   boundActions.Add();
                }, 1000);
            }
          }>1秒后加1</button>
        </div>
      )
    }
}

可以看到所有 action 都由 action creator 派发，不再显式的调用store.dispatch，bindActionCreator 内部就是返回了 dispatch 函数的调用，下面我们来写一下这个 bindActionCreator 函数实现：

思路：就是给每一个action creator 都返回 dispatch 方法调用，如果传入的是函数，也就是单个 action creator，直接调用返回 type，将参数传给调用 dispatch 的函数，如果是一个对象，就给这个对象上的每一个 action creator 都加上 dispatch 方法调用，所以代码的核心就是bindActionCreator

function bindActionCreator(actionCreator, dispatch) {
  // 这里派发 action，执行 actionCreator 函数，返回一个 type 作为 dispatch 的参数调用
  return function(...args) {
    dispatch(actionCreator.apply(this, args))
  }
}

完整的实现代码如下：

/**
 * function Add() {
      return { type: INCREMENT }
   }
   function Minus() {
      return { type: DECREMENT }
   }
 * const actions = { Add, Minus }
 * const boundActions = bindActionCreators(actions, store.dispatch)
 */

function bindActionCreator(actionCreator, dispatch) {
  // 这里派发 action，执行 actionCreator 函数，返回一个 type 作为 dispatch 的参数调用的函数
  return function(...args) {
    dispatch(actionCreator.apply(this, args))
  }
}

function bindActionCreators(actionCreators, dispatch) {
  // 如果是一个函数，表示就是一个 actionCreator，直接返回包装了调用dispatch的函数
  if (actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  // 如果是一个对象，给每个 actionCreator 都包装返回调用dispatch的函数
  if (typeof actionCreators === 'object' && actionCreators !== null) {
    const bindActionCreators = {}
    for(const key in actionCreators) {
      const actionCreator = actionCreators[key]
      bindActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
    return bindActionCreators
  }
}

export default bindActionCreators

combineReducers

通常组件不会只有一个 reducer，每个组件都可以有自己的 reducer 和 state，便于模块化管理。但是 redux 规定，一个应用只能有一个 store，一个 reducer，一个 state，根据程序模块化，分而治之的管理模式，这个时候就需要合并多个 reducer，多个状态为一个 reducer，一个state，combineReducers 就是做合并 reducer操作的，下面先来看看用法，然后再实现一个。
这里只贴重要的代码，其他细致的可以到 github 仓库看实战。
src/components/Counter5.js

import React, { Component } from 'react';
import { bindActionCreators} from '../redux';
import * as actionType from '../actionTypes'
// import { bindActionCreators } from '../redux'
import store from '../store'


const actions = {
  Add5: actionType.Add5,
  Minus5: actionType.Minus5
}
const boundActions = bindActionCreators(actions, store.dispatch)

export default class Counter5 extends Component {
  constructor(props) {
    super(props)
    this.state = { number : 5}
  }
  componentDidMount() {
    this.unsubscribe = store.subscribe(() => this.setState({ number: store.getState().Counter5.number }));
  }
  componentWillUnmount() {
    this.unsubscribe();
  }
  render() {
    return (
      <div>
        <p>{this.state.number}</p>
        <button onClick={boundActions.Add5}>+</button>
        <button onClick={boundActions.Minus5}>-</button>
        <button onClick={
          () => {
              setTimeout(() => {
                boundActions.Add5();
              }, 1000);
          }
        }>1秒后加5</button>
      </div>
    )
  }
}

新建 reducers 和 action types
src/reducers/Counter5.js，src/actionTypes

// src/reducers/Counter5.js
import * as actionType from '../actionTypes'

export let Counter5State = { number: 5 };

const reducer = (state = Counter5State, action) => {
  switch (action.type) {
    case actionType.INCREMENT5:
      return { number: state.number + 5 };
    case actionType.DECREMENT5:
      return { number: state.number - 5 };
    default:
      return state;
    }
}
export default reducer

// src/actionTypes.js
export const INCREMENT5 = 'ADD5';
export const DECREMENT5 = 'MINUS5';

export const INCREMENT6 = 'ADD6';
export const DECREMENT6 = 'MINUS6';

export function Add5() {
  return { type: INCREMENT5 }
}
export function Minus5() {
  return { type: DECREMENT5 }
}

export function Add6() {
  return { type: INCREMENT6 }
}
export function Minus6() {
  return { type: DECREMENT6 }
}

src/store.js

import { createStore } from 'redux'
import reducers from './reducers'
const store = createStore(reducers);
export default store

src/reducers/index.js

import { combineReducers } from 'redux'
import Counter5 from '../reducers/Counter5'
import Counter6 from '../reducers/Counter6'

const reducers = {
  Counter5,
  Counter6
}
const combinedReducers = combineReducers(reducers)
export default combinedReducers

其他的不贴了，效果就是组件的状态互不干扰：

combineReducers就是将多个组件的 reducer 合并为一个 reducer，内部实现是过滤 reducers 对象上的函数属性，然后返回一个combination函数，这个combination函数内部会遍历过滤之后的对象，解析出来每一个 reducer，拿到对应的状态，最后再根据 reducer 的 key，返回一个新的状态对象。根据 reducer 解析出来的 state 是最重要的一段，const reducer = finalReducers[key]，const nextStateForKey = reducer(previousStateForKey, action)。这里面有一个优化操作：定义一个 hasChanged的标志，新状态和老状态不一致就返回新状态，否则返回老的状态。
具体代码实现如下，跟源码的实现是一致的，代码有备注解释：
src/redux/combineReducers

export default function combineReducers (reducers) {
  // 1. 过滤 reducers 对象上的函数属性
  const reducerKeys = Object.keys(reducers) // ["counter1", "counter2"]
  const finalReducers = {}
  for(let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i] // "counter1"
    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key] // finalReducers: {counter1: counter1, counter2: counter2}
    }
  }

  // 2. 返回一个函数 遍历finalReducers，生成state
  const finalReducerKeys = Object.keys(finalReducers) // ['counter1', 'counter2']
  return function combination (state = {}, action) {
    let hasChanged = false // hasChanged是作性能优化，没有改变就返回原来的state
    const nextState = {}
    for(let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i] // "counter1"
      const reducer = finalReducers[key] // reducer counter1 函数
      const previousStateForKey = state[key] // 取出reducer对应的state

      // 这步最重要：给reducer传入老的state和action,返回新的state
      const nextStateForKey = reducer(previousStateForKey, action)
      // 将新的state的key 拼到总的state上，组件通过 state.counter1.number获取
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey // 前后状态不一样就是改变了
    }
    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length // reducers的key不一样也是变了
    return hasChanged ? nextState : state
  }

以上就是 combineReducers 的实现。

react-redux 实现

从上面可以 Counter5，Counter6 组件可以看出来，这两个组件其实有很多的相似代码，比如订阅更新，获取状态等，这些都可以抽离出来，减少冗余代码，将 store 绑定到 context 上，至上而下的传递，这就是 react-redux 做的事情。

先来看一下 react-redux 的应用，实现一个 Counter7 组件，对应的 actions 和 reducer 和上面一样，就不赘述了。Counter7 使用 react-redux 的 connect 返回一个高阶组件：

src/components/Counter7.js

import React, { Component } from 'react'
import * as actionType from '../actionTypes'
import { connect } from 'react-redux'


const actions = {
  add: actionType.Add7,
  minus: actionType.Minus7
}

const mapStateToProps = (state) => {
  console.log(state)
  return {
    number: state.Counter7.number
  }
}

const mapDispatchToProps = actions

class Counter7 extends Component {
  render() {
    const { number, add, minus } = this.props
    return (
      <div>
        <p>{number}</p>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
        <button onClick={
          () => {
              setTimeout(() => {
                add()
              }, 1000)
          }
        }>1秒后加5</button>
      </div>
    )
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps 
)(Counter7)

src/index.js 使用 Provider 共享 store：

import React from 'react';
import ReactDOM from 'react-dom';
import Counter7 from './components/Counter7'
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <Counter7 />
  </Provider>
,
  document.getElementById('root')
)

可以看到 Counter7 使用 connect 连接，mapStateToProps 将 store 上的state 拼到 props 上，mapDispatchToProps 将派发函数拼接到 props。
下面来看看 Provider 和 connect 实现，根据 react-redux 官方的实现，我们也采用函数和 hooks 的方式实现。

Provider 是利用 react 的 context 创建上下文容器，value 可以设置成共享的数据，provider 提供数据，consumer 消费这些数据。
const { Provider, Consumer } = React.createContext(defaultValue);
新建一个 react-redux 文件目录，里面来写代码实现：
src/react-redux/index.js

import Provider from './Provider'
import connect from './connect'

export {
  Provider,
  connect
}

src/react-redux/ReactReduxContext.js

import React from 'react'
export const ReactReduxContext = React.createContext(null)
export default ReactReduxContext

src/react-redux/Provider.js

import React from 'react'
import ReactReduxContext from './ReactReduxContext'

export default function Provider (props) {
  return (
    <ReactReduxContext.Provider value={{ store: props.store }}>
      {props.children}
    </ReactReduxContext.Provider>
  )
}

最复杂的是 connnect 的实现：
connnect 是一个函数，返回一个被包装过后的组件，里面做的事情就是将 state，dispatch 派发函数作为 props 拼到被包装的组件上，然后在渲染的时候订阅更新函数，更新状态。
mapStateToProps 映射 state 到 props 上const stateProps = useMemo(() => mapStateToProps(preState), [preState])

const mapStateToProps = (state) => {
  return {
    number: state.Counter7.number
  }
}

mapDispatchToProps 就是映射 dispatch 函数到 props，这里分三种情况，如果参数是对象就要做 bindActionCreators，分别包装返回具有 dispatch能力的函数对象，像这样：{add: ƒ, minus: ƒ}；如果参数是函数，就直接拼mapDispatchToProps(props, dispatch)，否则就直接返回一个包含 dispatch 的对象；

const dispatchProps = useMemo(() => {
  let dispatchProps
  if (typeof mapDispatchToProps === 'object') {
    dispatchProps = bindActionCreators(mapDispatchToProps, dispatch)
   } else if (typeof mapDispatchToProps === 'function') {
    dispatchProps = mapDispatchToProps(props, dispatch)
    } else {
    dispatchProps = { dispatch }
    }
    return dispatchProps
}, [dispatch, props])

然后订阅更新函数，更新状态：

const [, forceUpdate] = useReducer(x => x + 1, 0)
useLayoutEffect(() => subscribe(forceUpdate), [subscribe])

useLayoutEffect 会在 dom 更新完之后，浏览器绘制之前执行。
最后返回包装之后的组件：
return <WrappedComponent {...props} {...stateProps} {...dispatchProps} />
完整的 connect 的实现代码如下：

import React, { useContext, useMemo, useReducer, useLayoutEffect } from 'react'
import ReactReduxContext from './ReactReduxContext'
import { bindActionCreators } from '../redux'

export default function connect (mapStateToProps, mapDispatchToProps) {
  return function (WrappedComponent) {
    return function (props) {
      const { store } = useContext(ReactReduxContext)
      const { getState, dispatch, subscribe} = store
      const preState = getState()
      // 映射状态到 props
      const stateProps = useMemo(() => mapStateToProps(preState), [preState])

      // 映射 dispatch 到 props
      const dispatchProps = useMemo(() => {
        let dispatchProps
        if (typeof mapDispatchToProps === 'object') {
          dispatchProps = bindActionCreators(mapDispatchToProps, dispatch)
        } else if (typeof mapDispatchToProps === 'function') {
          dispatchProps = mapDispatchToProps(props, dispatch)
        } else {
          dispatchProps = { dispatch }
        }
        return dispatchProps
      }, [dispatch, props])

      // 订阅更新函数，更新状态
      const [, forceUpdate] = useReducer(x => x + 1, 0)
      useLayoutEffect(() => subscribe(forceUpdate), [subscribe])

      // 返回被包装的组件
      return <WrappedComponent {...props} {...stateProps} {...dispatchProps} />
    }
  }
}

到目前为止，redux 和 react-redux 的基本核心都实现了，参照的是 github 上的源码。还剩下一个 中间件的功能，这个准备在下一章单独去写，分析一下时常用的几个 redux 中间件用法和实现，以及连接中间件的实现原理，到 react 生态的整合，比如 redux-saga，dva，umi等。目前项目用到的生态就是这些，所以想单独开一篇专门写这个（希望不要开天窗），加深理解，温故知新。

参考：
https://github.com/reduxjs/redux
https://github.com/reduxjs/react-redux