javascript - 如何更好地合并状态变化？

Question

updateUiActive 和 updateData 都返回新的状态副本。

我正在使用 updateData(updateUiActive(state, action), action) 返回新版本的状态，其中首先包含使用 updateUiActive 更新的属性，然后包含使用 updateData 更新的属性。

我想知道是否有更优雅、更有效的方法来做到这一点。也许使用 JS 进位？

const updateUiActive = (state, action) => {
  return dotProp.set(state, 'navigation.ui.active', action.payload)
}

const updateData = (state, action) => {
  const updatedData = state.navigation.data.map((x) => {
    x.isActive = x.id === action.payload
    return x
  })
  return dotProp.set(state, 'navigation.data', updatedData)
}

function navigationReducer (state = initialState, action) {
  switch (action.type) {
    case types.SET_ACTIVE:
      return updateData(updateUiActive(state, action), action)
    default:
      return state
  }
}

Answer 1

首先，redux 严重依赖于state 的不可变性。您不应该修改它，而应该返回它的新修改副本。

一种选择是自己做(ES 的扩展运算符通常对此非常有帮助)。

另一个选项是使用 immutability-helper 。一开始语法可能很难掌握，但对于更复杂的状态，它可以帮助您获得更好的结构。