关于javascript:从-Redux-源码谈谈函数式编程

摘要

在 React 的世界中，状态治理计划不下几百种，但其中最经典的，莫过于 Redux。如果你想学习函数式编程，那么 Redux
源码就是最好的学习材料。思考到不少小伙伴用的是 Vue，自己争取让这篇文章写得通俗易懂，让没有接触过 React 技术栈的同学也能把握
Redux。

在 React 的世界中，状态治理计划不下几百种，但其中最经典的，莫过于 Redux。如果你想学习函数式编程，那么 Redux 源码就是最好的学习材料。思考到不少小伙伴用的是 Vue，自己争取让这篇文章写得通俗易懂，让没有接触过 React 技术栈的同学也能把握 Redux。

Redux 属于典型的“百行代码，千行文档”，其中外围代码非常少，然而思维不简略，能够总结为上面两点：

全局状态惟一且不可变（Immutable），不可变的意思是当须要批改状态的时候，用一个新的来替换，而不是间接在原数据上做更改：
```
let store = {foo: 1, bar: 2};

// 当须要更新某个状态的时候
// 创立一个新的对象，而后把原来的替换掉
store = {...store, foo: 111};
```

这点与 Vue 恰好相反，在 Vue 中必须间接在原对象上批改，能力被响应式机制监听到，从而触发 setter 告诉依赖更新。

状态更新通过一个纯函数（Reducer）实现。纯函数（Pure function）的特点是：

输入仅与输出无关；

援用通明，不依赖内部变量；

不产生副作用；

因而对于一个纯函数，雷同的输出肯定会产生雷同的输入，十分稳固。应用纯函数进行全局状态的批改，使得全局状态能够被预测。

在应用 Redux 及浏览源码之前须要理解上面几个概念：

action 是一个一般 JavaScript 对象，用来形容如何批改状态，其中须要蕴含 type 属性。一个典型的 action 如下所示：

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

reducer 是一个纯函数，其函数签名如下：

/**
 * @param {State} state 以后状态
 * @param {Action} action 形容如何更新状态
 * @returns 更新后的状态
 */
function reducer(state: State, action: Action): State

reducer 函数的名字来源于数组的 reduce 办法，因为它们相似数组 reduce 办法传递的回调函数，也就是上一个返回的值会作为下一次调用的参数传入。

reducer 函数的编写须要严格遵顼以下规定：

查看 reducer 是否关怀以后的 action

如果是，就创立一份状态的正本，应用新的值更新正本中的状态，而后返回这个正本

否则就返回以后状态

一个典型的 reducer 函数如下：

const initialState = {value: 0}

function counterReducer(state = initialState, action) {if (action.type === 'counter/incremented') {
    return {
      ...state,
      value: state.value + 1
    }
  }
  return state
}

通过调用 createStore 创立的 Redux 利用实例，能够通过 getState() 办法获取到以后状态。

store 实例裸露的办法。更新状态的惟一办法就是通过 dispatch 提交 action。store 将会调用 reducer 执行状态更新，而后能够通过 getState() 办法获取更新后的状态：

store.dispatch({type: 'counter/incremented'})

console.log(store.getState())
// {value: 1}

createStore 的高阶函数封装，用于加强 store 的能力。Redux 的 applyMiddleware 是官网提供的一个 enhancer。

dispatch 的高阶函数封装，由 applyMiddleware 把原 dispatch 替换为蕴含 middleware 链式调用的实现。Redux-thunk 是官网提供的 middleware，用于反对异步 action。

学习源码之前，咱们先来看下 Redux 的根本应用，便于更好地了解源码。

首先咱们编写一个 Reducer 函数如下：

// reducer.js
const initState = {
  userInfo: null,
  isLoading: false
};

export default function reducer(state = initState, action) {switch (action.type) {
    case 'FETCH_USER_SUCCEEDED':
      return {
        ...state,
        userInfo: action.payload,
        isLoading: false
      };
    case 'FETCH_USER_INFO':
      return {...state, isLoading: true};
    default:
      return state;
  }
}

在下面代码中：

reducer 首次调用的时候会传入 initState 作为初始状态，而后 switch…case 最初的 default 用来获取初始状态

在 switch…case 中还定义了两个 action.type 用来指定如何更新状态

接下来咱们创立 store：

// index.js
import {createStore} from "redux";
import reducer from "./reducer";

const store = createStore(reducer);

store 实例会裸露两个办法 getState 和 dispatch，其中 getState 用于获取状态，dispatch 用于提交 action 批改状态，同时还有一个 subscribe 用于订阅 store 的变动：

// index.js

// 每次更新状态后订阅 store 变动
store.subscribe(() => console.log(store.getState()));

// 获取初始状态
store.getState();

// 提交 action 更新状态
store.dispatch({type: "FETCH_USER_INFO"});
store.dispatch({type: "FETCH_USER_SUCCEEDED", payload: "测试内容"});

咱们运行一下下面的代码，控制台会先后打印：

{userInfo: null, isLoading: false} // 初始状态
{userInfo: null, isLoading: true} // 第一次更新
{userInfo: "测试内容", isLoading: false} // 第二次更新

下面的例子尽管很简略，然而曾经蕴含 Redux 的外围性能了。接下来咱们来看下源码是如何实现的。

能够说 Redux 设计的所有核心思想都在 createStore 外面了。createStore 的实现其实非常简单，整体就是一个闭包环境，外面缓存了 currentReducer 和 currentState，并且定义了 getState、subscribe、dispatch 等办法。

createStore 的外围源码如下，因为这边还没用到 storeEnhancer，结尾有些 if…else 的逻辑被省略了，顺便把源码中的类型注解也都去掉了，不便浏览：

// src/createStore.ts
function createStore(reducer, preloadState = undefined) {
  let currentReducer = reducer;
  let currentState = preloadState;
  let listeners = [];

  const getState = () => {return currentState;}

  const subscribe = (listener) => {listeners.push(listener);
  }

  const dispatch = (action) => {currentState = currentReducer(currentState, action);

    for (let i = 0; i < listeners.length; i++) {const listener = listeners[i];
      listener();}

    return action;
  }
  
  dispatch({type: "INIT"});

  return {
    getState,
    subscribe,
    dispatch
  }
}

createStore 的调用链路如下：

首先调用 createStore 办法，传入 reducer 和 preloadState。preloadState 代表初始状态，如果不传那么 reducer 必须要指定初始值；

将 reducer 和 preloadState 别离赋值给 currentReducer 和 currentState 用于创立闭包；

创立 listeners 数组，这其实就是基于公布订阅模式，listeners 就是公布订阅模式的事件核心，也是通过闭包缓存；

创立 getState、subscribe、dispatch 等函数；

调用 dispatch 函数，提交一个 INIT 的 action 用来生成初始 state，在 Redux 源码中，这里的 type 是一个随机数；

最初返回一个蕴含 getState、subscribe、dispatch 函数的对象，即 store 实例；

那么很显然，外界无法访问到闭包的值，只能通过 getState 函数拜访。

为了订阅状态更新，能够应用 subscribe 函数向事件核心 push 监听函数（留神 listener 是容许副作用存在的）。

当须要更新状态时，调用 dispatch 提交 action。在 dispatch 函数中调用 currentReducer（也就是 reducer 函数），并传入 currentState 和 action，而后生成一个新的状态，传给 currentState。在状态更新实现后，将订阅的监听函数执行一遍（实际上只有调用 dispatch，即便没有对 state 做任何批改，也会触发监听函数）。

如果有相熟面向对象编程的小伙伴可能会说，createStore 外面做的事件能够封装到一个类外面。的确能够，自己用 TypeScript 实现如下（公布订阅的性能不写了）：

type State = Object;
type Action = {
  type: string;
  payload?: Object;
}
type Reducer = (state: State, action: Action) => State;

// 定义 IRedux 接口
interface IRedux {getState(): State;
  dispatch(action: Action): Action;
}

// 实现 IRedux 接口
class Redux implements IRedux {
  // 成员变量设为公有
  // 相当于闭包作用
  private currentReducer: Reducer;
  private currentState?: State;

  constructor(reducer: Reducer, preloadState?: State) {
    this.currentReducer = reducer;
    this.currentState = preloadState;
    this.dispatch({type: "INIT"});
  }
  
  public getState(): State {return this.currentState;}

  public dispatch(action: Action): Action {
    this.currentState = this.currentReducer(
      this.currentState,
      action
    );
    return action;
  }
}

// 通过工厂模式创立实例
function createStore(reducer: Reducer, preloadState?: State) {return new Redux(reducer, preloadState);
}

你看，多有意思，函数式编程和面向对象编程居然必由之路了。

applyMiddleware 是 Redux 中的一个难点，尽管代码不多，然而外面用到了大量函数式编程技巧，自己也是通过大量源码调试才彻底搞懂。

首先要能看懂这种写法：

const middleware =
  (store) =>
    (next) =>
      (action) => {// ...}

下面的写法相当于：

const middleware = function(store) {return function(next) {return function(action) {// ...}
  }
}

其次须要晓得，这种其实就是函数柯里化，也就是能够分步承受参数。如果内层函数存在变量援用，那么每次调用都会生成闭包。

说到闭包，有些同学马上就想到内存透露。但实际上闭包在平时我的项目开发中十分常见，很多时候咱们不经意间就创立了闭包，但往往都被咱们疏忽了。

闭包一大作用就是缓存值，这和申明一个变量在赋值的成果是相似的。而闭包的难点就在于，变量是显式申明，而闭包往往是隐式的，什么时候创立闭包，什么时候更新了闭包的值，很容易被疏忽。

能够这么说，函数式编程就是围绕闭包开展的。在上面的源码剖析中，会看到大量闭包的例子。

applyMiddleware 是 Redux 官网实现的 storeEnhancer，实现了一套插件机制，减少 store 的能力，例如实现异步 Action，实现 logger 日志打印，实现状态长久化等等。

export default function applyMiddleware<Ext, S = any>(...middlewares: Middleware<any, S, any>[]
): StoreEnhancer<{dispatch: Ext}>

个人观点，这样做的益处就是提供了造轮子的空间

applyMiddleware 承受一个或多个 middleware 实例，而后再传给 createStore：

import {applyMiddleware, createStore} from "redux";
import thunk from "redux-thunk"; // 应用 thunk 中间件
import reducer from "./reducer";

const store = createStore(reducer, applyMiddleware(thunk));

createStore 入参中只承受一个 storeEnhancer，如果须要传入多个，能够应用 Redux Utils 中的 compose 函数将它们组合起来。

compose 函数在前面会介绍

看下面的用法，能够猜想 applyMiddleware 必定也是个高阶函数。之前说到 createStore 后面有些 if..else 逻辑因为没用到 storeEnhancer 所以被省略了。这边咱们一起来看下。

首先看 createStore 的函数签名，实际上是能够承受 1-3 个参数。其中 reducer 是必须要传递的。当第二个参数为函数类型，会辨认为 storeEnhancer。如果第二个参数不是函数类型，则会辨认为 preloadedState，此时还能够再传递一个函数类型的 storeEnhancer：

function createStore(reducer: Reducer, preloadedState?: PreloadedState | StoreEnhancer, enhancer?: StoreEnhancer): Store

能够看到源码中参数校验的逻辑：

// src/createStore.ts:71
if ((typeof preloadedState === 'function' && typeof enhancer === 'function') ||
  (typeof enhancer === 'function' && typeof arguments[3] === 'function')
) {
  // 传递两个函数类型参数的时候，抛出异样
  // 也就是只承受一个 storeEnhancer
  throw new Error();}

当第二个参数为函数类型，将它作为 storeEhancer 解决：

// src/createStore.ts:82
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
  enhancer = preloadedState as StoreEnhancer<Ext, StateExt>
  preloadedState = undefined
}

接下来是一个比拟难的逻辑：

// src/createStore.ts:87
if (typeof enhancer !== 'undefined') {
  // 如果应用了 enhancer
  if (typeof enhancer !== 'function') {
    // 如果 enhancer 不是函数就抛出异样
    throw new Error();}

  // 间接返回调用 enhancer 之后的后果，并没有往下持续创立 store
  // enhancer 必定是一个高阶函数
  // 先传入了 createStore，又传入 reducer 和 preloadedState
  // 阐明很有可能在 enhancer 外部再次调用 createStore
  return enhancer(createStore)(
    reducer,
    preloadedState
  )
}

上面咱们来看一下 applyMiddleware 的源码，为便于浏览，把源码中的类型注解都去掉了：

// src/applyMiddleware.ts
import compose from './compose';

function applyMiddleware(...middlewares) {return (createStore) => (reducer, preloadedState) => {const store = createStore(reducer, preloadedState);
    let dispatch = () => {throw new Error();
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action, ...args) => dispatch(action, ...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {
      ...store,
      dispatch
    }
  }
}

能够看到这里代码并不多，然而呈现了一个函数嵌套函数的情景：

const applyMiddleware = (...middlewares) =>
  (createStore) =>
    (reducer, preloadedState) => {// ...}

剖析一下源码中的调用链路：

调用 applyMiddleware 时，传入中间件实例，返回 enhancer。从残余参数的用法看出，反对传入多个 middleware；

由 createStore 调用 enhancer，分两次传入 createStore 和 reducer、preloadedState；

外部再次调用 createStore，这次因为没有传 enhancer，所以间接走创立 store 的流程；

创立一个通过润饰的 dispatch 办法，笼罩默认 dispatch；

结构 middlewareAPI，对 middleware 注入 middlewareAPI；

将 middleware 实例组合为一个函数，再向 middleware 传递默认的 store.dispatch 办法；

最初返回一个新的 store 实例，此时 store 的 dispatch 办法通过了 middleware 润饰；

这里波及到 compose 函数，是函数式编程范式中常常用到的一种解决，创立一个从右到左的数据流，左边函数执行的后果作为参数传入右边，最终返回一个以上述数据流执行的函数：

// src/compose.ts:46
export default function compose(...funcs) {if (funcs.length === 0) {return (arg) => arg
  }
  if (funcs.length === 1) {return funcs[0]
  }
  return funcs.reduce((a, b) =>
      (...args) =>
        a(b(...args))
  )
}

思考题：如果心愿把执行程序改为从左往右，须要怎么改？

通过这边的代码，咱们不难推断出一个中间件的构造：

function middleware({dispatch, getState}) {
  // 接管 middlewareAPI
  return function(next) {
    // 接管默认的 store.dispatch 办法
    return function(action) {
      // 接管组件调用 dispatch 传入的 action
      console.info('dispatching', action);
      let result = next(action);
      console.log('next state', store.getState());
      return result;
    }
  }
}

看到这里，我想大多数读者都会有两个问题：

通过 middlewareAPI 获取的 dispatch 函数和 store 实例最终裸露的 dispatch 函数都是通过润饰的吗；

为了避免在创立 middleware 的时候调用 dispatch，applyMiddleware 给新的 dispatch 初始化为一个空函数，且调用会抛出异样，那么这个函数到底在何时被替换掉的；

大家能够先试着思考一下。

说实话，自己在浏览源码的时候也被这两个问题困扰，大多数技术文章也都没有给出解释。没方法，只能通过调试源码来找答案。通过一直调试，终于搞清楚了，middlewareAPI 的 dispatch 函数自身其实就是以闭包模式引入的，这个闭包可能没多少人能看得出来：

// 定义新的 dispatch 办法
// 此时是一个空函数，调用会抛出异样
let dispatch = () => {throw new Error();
}
// 定义 middlewareAPI
// 留神这里的 dispatch 是通过闭包模式引入的
const middlewareAPI = {
  getState: store.getState,
  dispatch: (action, ...args) => dispatch(action, ...args)
}
// 对 middleware 注入 middlewareAPI
// 此时在 middleware 中调用 dispatch 会抛出异样
const chain = middlewares.map(middleware => middleware(middlewareAPI));

而后上面这段代码其实做了两件事，一方面将 middleware 组合为一个函数，注入默认 dispatch 函数，另一方面将新的 dispatch 初始的空函数替换为失常可执行的函数。同时因为 middlewareAPI 的 dispatch 是以闭包模式引入的，当 dispatch 更新之后，闭包中的值也相应更新：

// 将 dispatch 替换为失常的 dispatch 办法
// 留神闭包中的值也会相应更新，middleware 能够拜访到更新后的办法
dispatch = compose(...chain)(store.dispatch);

也就是说，createStore 生成的实例裸露的 dispatch 和 middleware 获取的都是润饰后的 dispatch，并且应该是长这样：

function(action) {
  // 留神这里存在闭包
  // 能够获取到中间件初始化传入的 dispatch、getState 和 next
  // 如果你打断点，能够在 scope 中看到闭包的变量
  // 同时留神这里的 dispatch 就是这个函数自身
  console.info('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
}

因为 reducer 须要严格控制为纯函数，因而不能在外面进行异步操作，也不能进行网络申请。有些同学可能会说，尽管 reducer 外面不能放异步代码，然而能够把 dispatch 函数放在异步回调中调用呀：

setTimeout(() => {this.props.dispatch({ type: 'HIDE_NOTIFICATION'})
}, 5000)

在 React 组件中通常用 connect 把 dispatch 映射到组件的 props 中，相似 Vuex 中的 mapAction 用法。

的确能够！Redux 作者 Dan Abramov 在 Stackoverflow 下面有一个十分好的答复，其中就同意了这种用法：

https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559

自己将 Dan Abramov 的外围观点总结如下。

Redux 的确提供了一些解决异步 Action 的代替办法，但应该只在当你意识到你编写了大量模板代码的时候再去应用。否则就用最简略的计划（如无必要，勿增实体）；
当多个组件须要用到同一个 action.type 时，为防止 action.type 拼写错误，须要抽离公共的 actionCreator，例如：

  // actionCreator.js
  export function showNotification(text) {return { type: 'SHOW_NOTIFICATION', text}
  }
  export function hideNotification() {return { type: 'HIDE_NOTIFICATION'}
  }

  // component.js
  import {showNotification, hideNotification} from '../actionCreator'

  this.props.dispatch(showNotification('You just logged in.'))
  setTimeout(() => {this.props.dispatch(hideNotification())
  }, 5000)

下面的逻辑在简略场景下齐全可行，然而随着业务复杂度减少会呈现几个问题：
1. 通常状态更新有好几个步骤，而且存在逻辑上的先后顺序，例如告诉的展现和暗藏，导致模板代码较多；
2. 提交的 action 没有状态，如呈现竞争条件可能导致状态更新出 bug；
出于下面的问题，须要抽离异步的 actionCreator，把波及状态更新的操作封装进去，便于复用，同时为每次 dispatch 生成惟一 id：

  // actions.js
  function showNotification(id, text) {return { type: 'SHOW_NOTIFICATION', id, text}
  }
  function hideNotification(id) {return { type: 'HIDE_NOTIFICATION', id}
  }

  let nextNotificationId = 0
  export function showNotificationWithTimeout(dispatch, text) {
    const id = nextNotificationId++
    dispatch(showNotification(id, text))

    setTimeout(() => {dispatch(hideNotification(id))
    }, 5000)
  }

而后在页面组件中这样应用，解决了模板代码和状态更新抵触问题：

  // component.js
  showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')

  // otherComponent.js
  showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')

仔细的同学应该留神到，这边传递了 dispatch。这是因为，失常来说只有组件中能拜访到 dispatch，为了能让内部封装的函数也能拜访，咱们须要将 dispatch 作为参数传过来；
这时有些同学会提出质疑，如果将 store 作为全局单例，不就能够间接拜访了：

  // store.js
  export default createStore(reducer)

  // actions.js
  import store from './store'

  // ...

  let nextNotificationId = 0
  export function showNotificationWithTimeout(text) {
    const id = nextNotificationId++
    store.dispatch(showNotification(id, text))

    setTimeout(() => {store.dispatch(hideNotification(id))
    }, 5000)
  }

  // component.js
  showNotificationWithTimeout('You just logged in.')

  // otherComponent.js
  showNotificationWithTimeout('You just logged out.')

下面这样从操作上来说的确可行，然而 Redux 团队并不同意单例的写法。他们的理由是，如果 store 变为单例，会导致服务端渲染的实现变得艰难，同时测试也不不便，如要改用 mock store 须要批改所有 import；
基于下面的起因，Redux 团队还是倡议应用函数参数将 dispatch 传递进来，只管这样很麻烦。那么有没有一种解决方案呢？有的，应用 Redux-thunk 就解决了这个问题；
实际上，Redux-thunk 的作用是教 Redux 辨认函数类型的非凡 Action；
中间件启用后，当 dispatch 的 Action 为函数类型，Redux-thunk 就会给这个函数传入 dispatch 作为参数，须要留神最终 reducer 拿到的依然是一般 JavaScript 对象作为 Action：

  // actions.js

  function showNotification(id, text) {return { type: 'SHOW_NOTIFICATION', id, text}
  }
  function hideNotification(id) {return { type: 'HIDE_NOTIFICATION', id}
  }

  let nextNotificationId = 0
  export function showNotificationWithTimeout(text) {return function (dispatch) {
      const id = nextNotificationId++
      dispatch(showNotification(id, text))

      setTimeout(() => {dispatch(hideNotification(id))
      }, 5000)
    }
  }

在组件中应用如下：

  // component.js
  this.props.dispatch(showNotificationWithTimeout('You just logged in.'))

好了，Dan Abramov 的观点就总结到这里。

看到这里大家应该分明 Redux-thunk 的作用了，Redux-thunk 自身并没有提供异步解决方案，实现异步就是应用最简略的办法，把 dispatch 函数放在异步回调中。很多时候咱们会封装异步的 actionCreator，在异步操作中每次都须要把 dispatch 传递进去很麻烦，Redux-thunk 对 dispatch 函数进行高阶封装，容许承受函数类型的 Action，同时给这个 Action 传入 dispatch 和 getState 作为参数，这样就不必每次手动传递。

在看源码之前，大家能够联合 applyMiddleware 源码，想一下 Redux-thunk 外部实现。

其实 Redux-thunk 实现原理非常简单，代码如下：

// src/index.ts:15
function createThunkMiddleware(extraArgument) {return ({ dispatch, getState}) =>
    next =>
      action => {if (typeof action === 'function') {return action(dispatch, getState, extraArgument)
        }

        return next(action)
      }
}

在 Redux-thunk 外部，首先会调用 createThunkMiddleware 办法失去一个高阶函数而后向外导出。这个函数就是咱们之前剖析的中间件构造：

({dispatch, getState}) =>
  next =>
    action => {if (typeof action === 'function') {return action(dispatch, getState, extraArgument)
      }

      return next(action)
    }

首先在初始化阶段，applyMiddleware 会为 thunk 先后注入 middlewareAPI（对应 dispatch 和 getState 形参）和 store.dispatch（即本来的 dispatch 办法，对应 next 形参）。

在初始化实现之后，store 实例的 dispatch 会被替换为一个通过润饰的 dispatch 办法（middlewareAPI 中的 dispatch 因为是闭包援用，也会被替换），用 dispatch.toString() 打印能够输入如下内容：

// 留神这里能够拜访到闭包中的 dispatch、getState 和 next
// 初始化实现后的 dispatch 实际上就是上面这个函数自身
action => {if (typeof action === 'function') {return action(dispatch, getState, extraArgument)
  }

  return next(action)
}

接下来的事件就很简略了，当咱们提交一个函数类型的 Action：

// actions.js
const setUserInfo = data => ({
  type: "SET_USER_INFO",
  payload: data
})

export const getUserInfoAction = userId => {
  return dispatch => {getUserInfo(userId)
      .then(res => {dispatch(setUserInfo(res));
      })
  }
}

// component.js
import {getUserInfoAction} from "./actionCreator";

this.props.dispatch(getUserInfoAction("666"));

当提交的 action 为函数类型的时候，就调用这个函数，而后传入 dispatch、getState、extraArgument 参数：

if (typeof action === 'function') {return action(dispatch, getState, extraArgument)
}

（从这里能够看出，除了 dispatch 之外，在函数类型的 Action 外部还能够拜访 getState 和 extraArgument）

当异步操作实现，调用 Redux-thunk 传递的 dispatch 办法提交对象类型 Action 时，还是进入这个被润饰的 dispatch 办法，只不过在判断类型的时候，进入了另一个分支：

return next(action);

这里的 next 就是 Redux 本来的 dispatch 办法，会将对象类型的 Action 提交给 reducer 办法，最终执行状态更新。

Redux 是一种十分经典的状态治理解决方案。它遵循函数式编程的准则，状态只读且不可变，只有通过纯函数能力更新状态。

然而 Redux 同样也存在着不少问题。首先，对于老手来说，上手老本较高，应用之前须要先理解函数式编程的概念和设计思维。其次，Redux 在理论开发中十分繁琐，即便实现一个很简略的性能，可能也须要同时批改 4-5 个文件，升高了开发效率。作为比照，Vuex 的上手老本非常低，对于老手十分敌对，应用也非常简单，既不须要异步中间件，也不须要额定的 UI binding，在 Redux 中通过插件提供的性能，全副内置开箱即用。

对此，Redux 官网提供了一个封装计划 Redux Toolkit，社区也提供了很多封装计划，例如 Dva、Rematch 等等，旨在简化 Redux 的应用，API 的封装上很多中央就是参考了 Vuex。甚至还呈现了酷似 Vue 响应式、应用可变数据（Mutable）的 Mobx 状态治理计划。此外，React 官网团队也在近期推出了 Recoil 状态治理库。

https://redux.js.org

https://github.com/reduxjs/redux

https://github.com/reduxjs/redux-thunk

https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559

coding 优雅指南：函数式编程

关于javascript:从-Redux-源码谈谈函数式编程

1. 须要理解的几个概念

Action

Reducers

Store

Dispatch

storeEnhancer

middleware

2. 根本应用

3. Redux Core 源码剖析

createStore

applyMiddleware

4. 解决异步 Action

5. 总结

参考

Just My Socks（注册教程内含优惠码）

关于javascript:从-Redux-源码谈谈函数式编程

1. 须要理解的几个概念

Action

Reducers

Store

Dispatch

storeEnhancer

middleware

2. 根本应用

3. Redux Core 源码剖析

createStore

applyMiddleware

4. 解决异步 Action

5. 总结

参考

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）