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

【问题标题】：Redux reducer state mutations and restoring initial stateRedux reducer 状态突变和恢复初始状态
【发布时间】：2021-02-06 16:10:40
【问题描述】：

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

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

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

dispatch(actions.restoreInitialState());

我的减速器是这样的：

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)

是否存在我正在改变我的状态或错误地恢复我的初始状态的风险？这可能有点矫枉过正，但我正在考虑像这样编辑我的减速器：

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)

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

【问题讨论】：

标签： javascript reactjs redux reducers

【解决方案1】：

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

现在，每次您从 reducer 返回时 - 只要您返回具有更新状态的新对象 - 返回 {... state} 或具有不同地址的对象 - 例如。 return initialState - 它是完美的。您无需担心突变。即使您在状态中有嵌套对象也是如此。只要您更改父级的地址 - DOM 就会正确更新。因此，请随意使用您在第一种情况下所做的代码。您不需要分布在嵌套对象上。无论如何，您的有效负载将具有不同的地址。

唯一需要担心的就是做这样的事情：

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

在这种情况下，状态对象通过对 updatedState 的引用进行传递——这意味着它们将共享相同的地址。并且由于您正在返回 updatedState - 地址没有更改，并且 DOM 不会正确/一致地更新。

【讨论】：

【解决方案2】：

你可以这样做：

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

【讨论】：