Как добавить новое свойство в состояние Redux при отправке действия - PullRequest
Новая
       11

Как добавить новое свойство в состояние Redux при отправке действия

0 голосов
/ 17 июня 2020

У меня есть initialState в моем редукторе, который является немного вложенным. Я пытаюсь добавить новое свойство isTouched к моему состоянию при отправке изменений действия / состояния. 

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

и в моем reducer: 

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

Кто-нибудь знает, как реализовать этот logi c. Любая помощь будет принята с благодарностью. Заранее спасибо.

1 Ответ

0 голосов
/ 17 июня 2020

как говорит Деннис, ваш код недействителен 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

, дайте мне знать, если это имеет смысл. могу уточнить если нет!

...