调度操作时如何向 Redux 状态添加新属性

Question

我的reducer 中有一个initialState，它有点嵌套。我试图在调度动作/状态更改时向我的状态添加一个新属性“isTouched”。

    const initialState = {
     isLoading: false,
     events: [
      { year:2021 , place: [{id:1,name:"BD"}] },
      { year: 2020, place: [{id:2,name:"AMS"}] },
    ],
  };

在我的减速器中：

case types.TOGGLE_PLACE_INFO:
  return {
    ...state,
     here need to write the logic if events.place.id === action.payload then add a new property to 
   "place" like this: place: [id:1,name:"BD",isTouched:true]
   }

所以在那之后我的状态将如下所示：

   const initialState = {
     isLoading: false,
     events: [
      { year:2021 , place: [{id:1,name:"BD", isTouched:true}] },
      { year: 2020, place: [{id:2,name:"AMS"}] },
    ],
  };

沙盒链接：https://codesandbox.io/s/holy-tdd-v3gbd?file=/src/reducers/commonReducer.js 因此，当单击 setTouched 按钮时，它应该更新位置并添加 isTouched: true

有没有人知道如何实现这个逻辑。任何帮助将不胜感激。在此先感谢。

Answer 1

正如丹尼斯所说，您的代码不是有效的 javascript。你想把它存储在一个对象而不是一个数组中

试试这样的：

const initialState = {
     isLoading: false,
     events: [
      { year: 2021, place: [ {id:1, name:"BD"} ]},
      { year: 2020, place: [ {id:2, name:"AMS"} ]},
    ],
};

case types.TOGGLE_PLACE_INFO:
  return {
    ...state,
    events: state.events.map((event) =>
              event.id === action.payload.id
                 ? {...event, place: [{...event.place, isTouched:true}]}
                 : event
              )
          }

我已更改您的 initialState，因此 place 现在有效。然后我映射所有值，如果它们匹配，我会返回当前的值，就像{...event}，然后像这样添加新的isTouched 键：{...event, isTouched: true}。然后其次，如果他们不匹配我只是返回event

让我知道是否有意义。如果没有可以澄清！