如何将不可变.js与 redux 一起使用？

Question

Redux framework正在使用reducers来更改应用程序状态以响应操作。

关键要求是缩减器不能修改现有的状态对象；它必须产生一个新的对象。

错误示例：

import {
    ACTIVATE_LOCATION
} from './actions';

export let ui = (state = [], action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state.activeLocationId = action.id;
            break;
    }

    return state;
};

好例子:

import {
    ACTIVATE_LOCATION
} from './actions';

export let ui = (state = [], action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state = Object.assign({}, state, {
                activeLocationId: action.id
            });
            break;
    }

    return state;
};

这是一个很好的Immutable.js.用例

Answer 1

如果您只是在寻找一种简单的方法来进行没有突变的更新，我维护了一个库：https://github.com/substantial/updeep在我看来，这是使用redux做到这一点的好方法。

updeep允许您使用常规（冻结）对象层次结构，因此您可以执行销毁、查看日志和调试器中的对象等。它还具有强大的API，允许批量更新。它不会像“不可变”那样高效。js用于大型数据集，因为如果需要，它会克隆对象。

这里有一个例子(但更多信息请查看自述文件):

import {
    ACTIVATE_LOCATION
} from './actions';
import u from 'updeep';

export let ui = (state = [], action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state = u({ activeLocation: action.id }, state);
            break;
    }

    return state;
};

Answer 2

不可变.js应根据需要在每个化简器中使用，例如

import {
    ACTIVATE_LOCATION
} from './actions';

import Immutable from 'immutable';

export let ui = (state, action) => {
    switch (action.type) {
        case ACTIVATE_LOCATION:
            state = Immutable
                .fromJS(state)
                .set('activeLocationId', action.id)
                .toJS();
            break;
    }

    return state;
};

然而，在这个例子中有很多开销:每次调用reducer动作时，它都必须将JavaScript对象转换为不可变的实例，对结果对象进行变异，然后将其转换回JavaScript对象。

更好的方法是将初始状态设置为Immutable的实例：

import {
    ACTIVATE_LOCATION
} from './actions';

import Immutable from 'immutable';

let initialState = Immutable.Map([]);

export let ui = (state = initialState, action) => {
    html" target="_blank">switch (action.type) {
        case ACTIVATE_LOCATION:
            state = state.set('activeLocationId', action.id);
            break;
    }

    return state;
};

这样，您只需要将初始状态转换为不可变盎司的实例。然后，每个化简器都会将其视为不可变的实例，并将其作为不可变的实例传递下去。问题是，现在您需要在将值传递给视图上下文之前将整个状态转换为 JavaScript。

如果您在一个reducer中执行多个状态突变，您可能想要考虑使用< code >来批处理突变。带有突变。

为了让事情变得更简单，我开发了一个redux不可变库。它提供了组合减少器函数，相当于redux包中同名函数，只是它期望初始状态和所有减少器都可以使用Immutable.js对象。

Answer 3

以Immutable为例

import {
    ACTIVATE_LOCATION
} from './actions';

import { Map } from 'immutable';

const initialState = Map({})

export let ui = (state = initialState, action) => {
  switch (action.type) {
    case ACTIVATE_LOCATION:
      return state.set('activeLocationId', action.id);
    default:
      return state;
  }
};