Redux 初步尝试

写文章的时候还是 1.0.x, 现在已经 3.x 了.
虽然主体 API 没改, 但是细节的 API 增加了很多, 甚至更简单的方案.

---

关注 Redux 很久了, 一直在等稳定版, 终于稳定版出来了
不过真的运行起来, 比我之前估计的复杂度高太多了
这边可以看我用 CirruScript 写的代码... 虽然效果是不怎么样
https://github.com/jiyinyiyong/redux-in-cirru

大概梳理下这两天遇到的东西, 为后面做准备

关于

关于 Redux 我遇到的中文社区已经有两篇文章, 还行
https://ruby-china.org/topics/26944
http://segmentfault.com/a/1190000003033033
另外中文文档也有同学在翻译, 速度飞快啊:
https://github.com/camsong/redux-in-chinese
其他大量关于 Redux 的资源, 在列表能找到, 热度很高的
https://github.com/xgrommx/awesome-redux

要开始写 Redux 的话, 其实文档是分布在三个仓库当中的:
https://github.com/gaearon/redux
https://github.com/gaearon/redux-devtools
https://github.com/rackt/react-redux
其中 redux-devtools 是调试工具, 也是一个 React 组件
这个组件需要在开发环境判断渲染, 同时避免发布到线上去
而 react-redux 则是对于 React 的绑定, 包含了一些工具函数

我了解得不大具体, 其中 react-devtools 文档并不齐全
甚至需要去源码当中看具体的例子才能把 Demo 跑起来:
https://github.com/gaearon/redux-devtools/blob/master/examples/counter/containers/App.js
而 Redux 具体的写法, 也少不了要去看源码的 example 才算可以
https://github.com/rackt/redux/tree/master/examples

combineStore 和绑定 props 要注意

Redux 原来给出的概念, 听起来很简单的, Store 部分很像 Elm
大致就是 Model 部分设计成为一个不可变数据, 然后渲染
然而实际情况好像要复杂一些, 目前的 Store 当中的数据不是这样的
按照文档, 一般会出现这样的写法 combineReducers
http://rackt.github.io/redux/docs/basics/Reducers.html
注意是 ES6 的对象, 省略了 property 的书写, 实际上是个 Object 的定义:

import { combineReducers } from 'redux';

const todoApp = combineReducers({
  visibilityFilter,
  todos
});

这个方案的问题就是, Store 的顶层数据, 其实是用 Object 模拟的
包括后边绑定数据到组件上, 也是用了其中的一些 trick
比如说有这样的代码, 用来指明 store 传入的数据怎样绑定到组件上
https://github.com/rackt/redux/blob/master/examples/counter/containers/CounterApp.js

function mapStateToProps(state) {
  return {
    counter: state.counter
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(CounterActions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

现在 API 按说已经稳定, 但是个写法还是导致结果稍微复杂了一些
按作者说, Splitting Reducers, 化大为小, 是管理 Store 比较好的办法
但我总觉得应该是从不可变数据本身去找, 而不是增加一套写法
也许以后文档上或者教程上会说得明确一些, 现在我还不明白

细节要注意区分一下, 而且要按照代码跑一跑才行, 我描述得不清楚
由于上边这个结构的原因, store 本身定义的方法, 也许不方便直接用

Provider 的写法

关于把 Store 的数据传递到组件当中, Redux 提供了额外的绑定
结果也带出来了 Provider 组件, 接收属性, 还接收函数作为参数, 写法是:
https://github.com/rackt/redux/blob/master/examples/counter/containers/Root.js
注意, CounterApp 这边没写属性, 是通过签名提到的写法注入进去的
大致上是 mapStateToProps 函数, 具体细节恐怕需要看源码:

import { Provider } from 'react-redux';

export default class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        {() => <CounterApp />}
      </Provider>
    );
  }
}

而 Provider 的概念负责的事情似乎也多了一些, 具体到文档上看
http://rackt.github.io/redux/docs/basics/UsageWithReact.html

实现一个最简单的 Redux 应用, 需要的代码:
https://github.com/jackielii/simplest-redux-example/blob/master/index.js

Middlewares

中间件的概念我没看懂, 只是大致抄了一遍代码尝试了一遍
思路是用高阶函数对 store 做了一些封装, 插入了一些 Action 的操作
http://rackt.github.io/redux/docs/advanced/Middleware.html

DevTools

前面提到了 Devtools 是用 React 组件的方式提供的
没找到详细的文档, 具体的例子我查看代码的 examples 才知道的
https://github.com/gaearon/redux-devtools/blob/master/examples/counter/containers/App.js

export default class App extends Component {
  render() {
    return (
      <div>
        <Provider store={store}>
          {() => <CounterApp />}
        </Provider>
        <DebugPanel top right bottom>
          <DevTools store={store}
                    monitor={LogMonitor} />
        </DebugPanel>
      </div>
    );
  }
}

作者说调试工具是可以定制的, 因为仅仅是 React 组件而已
我估计大概是 LogMonitor 组件可以自己定义的关系

显示不可变数据

显示同时工具之后, 查看数据默认当做 JSON 对象处理和显示的,
在调试工具当中查看不可变数据稍微要加上一些代码:
https://github.com/gaearon/redux-devtools/issues/51

let selectDevToolsState = (state = {}) => Immutable.fromJS(state).toJS();

<DebugPanel top right bottom key="debugPanel">
    <DevTools store={store} select={selectDevToolsState} monitor={LogMonitor} />
</DebugPanel>

其中 state 变量有可能为 undefined 的, 注意不要忘掉处理

纯函数 Reducer

我在写 Demo 时候刚开始写了 shortid.generate()生成 id, 遇到个 bug
原因是这个生成 id 的函数是在 reducer 内部运行的,
似乎由于 DevTools 的存在, reducer 会被调用很多次, id 被创建了很多次
这不奇怪, 因为 Time Travel Debugger 就是会重新运行 Action 的

所以我才反应过来, 创建 id 在 Haskell 里也是跟 IO 有关的副作用函数
随机数还有读取外部环境的状态, 属于副作用, 会破坏纯函数
这个代码是不应该在 reducer 当中的写的, id 就放 Action Creator 里去了

这个可能一看暗示了 FRP 那样的编程思路引出的一个更深刻的问题
平时我们说 MVC, Model 是整个数据的核心, Model 可以被改变
在 FP 当中, Model 是以变化数据的 Stream 模拟它随着时间的改变
而这里, Store 作为 Model 却是因变量, 距离核心还隔着一步
数据的核心实际上是 initialState, 以及 Action 形成的 Stream
而 Model 实际上是通过 initialState 和 Actions 不断计算出来的

bindActionCreators

Redux 的例子当中, 处理 Action 是通过绑定到组件 props 来传递的
而不是我此前采用的, 直接用一个模块去调用的写法. 具体写法看这边:
https://github.com/rackt/redux/blob/master/docs/api/bindActionCreators.md
不清楚利弊. 我只是觉得这样设计太复杂了一些

总结

这篇文章算不上教程, 而是初步尝试 Redux 留下来的一些 Tips
我觉得大家关注 Redux 应该都是为的 Time Travel Debugger 的能力
现在看来 Redux 带来过多概念, 给我们项目跟进造成了门槛
总体思路上 Redux 比 Facebook 的方案清晰, 细节还期待更灵活一些