Redux reducer状态突变和恢复初始状态

Question

恢复初始状态的最佳方法是什么？对于这个例子，假设我可以通过调度以下操作来编辑一辆汽车：

dispatch(actions.editModel('Civic'));

dispatch(actions.editType({
    make: 'Ford',
    model: 'Focus'
}));

dispatch(actions.restoreInitialState());

我的reducer看起来像这样：

const initialState = {
  id: '1',
  vehicle: 'car',
  type: {
    make: 'Honda',
    model: 'Accord'
  },
  license: 'abc'
}

export default createReducer({
  [actions.editType]: (state, payload) => ({
    ...state,
    type: payload // payload is an object
  }),
  [actions.editModel]: (state, payload) => ({
    ...state,
    type: {
      ...state.type,
      model: payload // payload is a string
    }
  }),
  [actions.restoreInitialState]: (state) => ({
    state: initialState // initial state has nested objects
  })
}, initialState)

是否存在改变状态或错误恢复初始状态的风险？这可能有点夸张，但我想像这样编辑我的reducers：

export default createReducer({
  [actions.editType]: (state, payload) => ({
    ...state,
    type: { 
        ...payload // payload is an object
    }
  }),
  [actions.editModel]: (state, payload) => ({
    ...state,
    type: {
      ...state.type,
      model: payload // payload is a string
    }
  }),
  [actions.restoreInitialState]: (state) => ({
    state: {
        ...initialState // initial state has nested objects
    }
  })
}, initialState)

当我通过有效负载传递对象时，与仅引用我的初始状态有区别吗？(加上我的初始状态包含嵌套对象)

Answer 1

你有一个很棒的问题。要回答这个问题，您需要考虑为什么在React中避免数据突变是如此重要。每次状态变化时，React都会对更新后的虚拟DOM和旧的虚拟DOM进行简单的比较。在这个浅层比较中-当它遇到对象时-它只检查对象的地址。因此，只要您有一个新的父级地址，DOM就会正确更新。

现在，每次您从reducer返回时-只要您返回的是具有更新状态的新对象-就返回{...状态}或具有不同地址的对象-例如。return initialState -它非常完美。你不需要担心突变。即使状态中有一个嵌套的对象，也是如此。只要更改父对象的地址，DOM就会正确更新。因此，您可以像在第一个案例中一样使用代码。你不需要分散在嵌套的对象上。您的有效负载无论如何都会有一个不同的地址。

唯一让人厌烦的事情就是做这样的事情：

    case [actions.editModel]:
        const updatedState = state
        updatedState.model = payload;
        return updatedState;

在本例中，状态对象通过引用updatedState传递-这意味着它们将共享相同的地址。由于您返回的是updatedState -地址没有更改，DOM不会正确/一致地更新。

Answer 2

您可以简单地执行以下操作：

[actions.restoreInitialState]: () => initialState;