不可变数据

cuz 使用 ImmutableJS 实现数据的不可变性.

ImmutableJS #

不可变数据可以随时进行两个对象间的深度比较. 这样我们可以准确的判断 prop 是否发生变化来控制组件是否需要重绘, 由此显著的改善性能.

请查看官方文档以了解更多.

使用 #

在我们的 reducers 中, 我们在 initialState 时使用 fromJS 来初始化我们的数据, 它可以通过接收一个简单的 JSON 对象, 转换为不可变对象.

import { fromJS } from 'immutable';

const initialState = fromJS({
  myData: 'Hello World!',
});

在 reducers 对 action 的处理函数中, 可以使用 .set 和 .setIn 方法来生成一个新的不可变对象.

import { SOME_ACTION } from './actions';

// ...

function myReducer(state = initialState, action) {
  switch (action.type) {
    case SOME_ACTION:
      return state.set('myData', action.payload);
    default:
      return state;
  }
}

我们使用 reselect 来选择我们需要的部分并缓存计算的结果. 为了从不可变数据类型中获取 state 的真实值, 我们需要使用 .get 和 .getIn 方法.

const myDataSelector = (state) => state.get('myData');

export default myDataSelector;

了解更多, 请查看 reselect.