Redux 减速器 state 突变和恢复初始 state

Question

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

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)

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

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)

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

Answer 1

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

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

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

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

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

Answer 2

你可以简单地这样做：

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