使用React Hooks useReducer，如何有效地通過ID更新對象？

Question

我有一個可以分叉的StackBlitz ，我找到了類似的答案，但是我在將其應用於示例時遇到了麻煩，我認為這是因為我有一組對象。

我的代碼可以正常工作，但是它很冗長，我想讓使用Redux的其他人更容易理解。

const initialState = [];
const todoReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO': {
      return [...state, {
        id: state.length,
        name: action.name,
        complete: false
      }];
    }
    case 'TOGGLE_COMPLETE': {
      let left = state.filter((_, index) => index < action.index)
      let right = state.filter((_, index) => index > action.index)
      let completed = state.filter((_, index) => index == action.index)
      let updatedItem = {
        id: completed[0].id,
        name: completed[0].name,
        complete: !completed[0].complete
      }
      return [...left, updatedItem, ...right];
    }
    case 'CLEAR': {
      return initialState;
    }
    default: {
      return state;
    };
  }
}

我覺得答案類似於這個嗎？ 在React Redux Reducer中更新數組對象

在上面引用的答案中，他的對象具有state.posts如何更新我的示例，使其更類似於此示例？

如果我沒有類似的狀態對象，而又無法執行類似的操作，該如何定位待辦事項：

state.todos.complete = false.

我想為“ COMPLETE”動作寫一個更好的reduce。 我是否需要修改狀態的結構，即是否需要將其作為一個空對象而不是對象數組？

Answer 1

只是map ：

case 'TOGGLE_COMPLETE': {
  return state.map((item, i) => i === action.index 
    ? {...item, complete: !item.complete}
    : item
  )
}

您可以有條件地更新“完成”而無需重復多次。