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中的应用 这篇出色的分析文章。

作者：wlszouc