Redux的函数式编程思想

控制流框架 Redux 是研究函数式编程的极佳实例，因此网络上对其语句分析的文章众多，但绝大多数是描述具体实现，而本文尝试利用函数式编程的数学抽象来映射 Redux 的编程理念。

首先给出函数式编程的基础抽象概念 container：

var Container = function (x) {
  this.__value = x;
};

Container.of = function (x) {
  return new Container(x);
};

同时定义一个 functor:

//  (a  ->  b)  ->  Container   a   ->  Container   b
Container.prototype.map = function (f) {
  return Container.of(f(this.__value));
};

分析一下 container 和 functor：

• Container 中含有 __value 和 map 两个属性，而修改 __value 的方法只有 map，在操作完 __value 后将新值放回 Container 中。
• 如何操作或修改 __value 由 f 给出。

对比 Redux 的源码：

export default function createStore(reducer, preloadedState, enhancer) {
  // ......
  return enhancer(createStore)(reducer, preloadedState)
}
// ......
let currentReducer = reducer
let currentState = preloadedState
// ......
function getState() {
  return currentState
}
// ......
function dispatch(action) {
  // ......
  try {
    isDispatching = true
    currentState = currentReducer(currentState, action)
  } finally {
    isDispatching = false
  }
  // ......
  return action
}
// ......
return {
  dispatch,
  subscribe,
  getState,
  replaceReducer,
  [?observable]: observable
}

• store 是一个容器含有 state 和 reducer，这从 store 的创建语句 enhancer(createStore)(reducer, preloadedState) 可以很明显的得出。而修改 store 中的 currentState 的唯一方法是使用 currentReducer，并且 currentState 在修改完后将新值依然存放在 store 内。
• 如何修改 currentState 是根据用户操作 action 。

因此通过对比得到如下结果：

store -> container
currentState -> __value
action -> f
currentReducer -> map

类似可以得出 middleware 是 IO functor 的映射，以此来解决异步操作的各种问题。

Redux 所谓的函数式编程不仅仅体现在具体语句的实现，其编程理念的基础也依赖于函数式编程的数学概念。本文也只是简单分析了 Redux 的容器构建也就是 store 的数学理念，具体的控制流可以参看 函数式编程在Redux/React中的应用 这篇出色的分析文章。最后不得不感叹 Redux 的设计水平以及先进理念，感谢 Redux 作者。（Facebook 早已看穿一切）