控制流框架 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 早已看穿一切）
参考：
JS 函数式编程指南
