reactjs - 编写减速器的更好方法？

Question

有没有更好的方法来编写以下代码：

export const getItemsSuccess = (state, entity, payload) => {
  const {count, rows} = payload

  const clonedState = {...state}
  clonedState[entity] = {...clonedState[entity], count, rows}

  return {
    ...clonedState,
  }
}

Answer 1

对于像这样的简单情况，我倾向于将其内联到单个对象文字中。它使逻辑更容易理解。

export const getItemsSuccess = (state, entity, {count, rows}) => {
  return {
    ...state,
    [entity]: {
      ...state[entity],
      count,
      rows,
    }
  }
}

1. 使用有效载荷的解构分配{count, rows}。这使得payload应该具有的属性一目了然，并使其易于在reducer主体中使用。

2. 只克隆一次对象。你有const clonedState = { ...state }并且return { ...clonedState }在哪里return clonedState会做得很好（或者像我一样返回一个构造的文字）。

3. 不要为在最终状态中仅使用一次的值创建局部变量。这使得更容易遵循减速器的流程。

4. 将整个新状态构造为单个对象字面量可以很容易地判断发生了什么以及数据是如何变化的。

这是一个有点主观的事情，但我认为这种风格有一些优点。