Блог

Я только что прошел через приведенный ниже сценарий и почувствовал себя странно по этому поводу.

По сути, в моем компоненте я буду использовать inputList из redux store, прокручивать его в цикле, обновлять некоторые его поля. Псевдокод, как показано ниже

 
//Before onClick, this.props.inputList as below:
[
  { id: 1, active: 1, name: 'john' },
  { id: 2, active: 1, name: 'cena' },
  { id: 3, active: 2, name: 'oldValue' },
]

onClick = () => {
  this.props.inputList
    .filter(x => x.active === 2)
    .forEach(x => {
      //Update name to 'newValue' and submit to backend

      this.props.reduxAction_updateField({ fieldName: 'name', value: 'newValue'});

      //********
      console.log(x) //x.name remained 'oldValue' which make sense.
      //Try to use Store.getState().myReducer.inputList
      const expectUpdatedElement = Store.getState().myReducer.inputList
                                   .find(y => y.id === 3);

      //expectUpdatedElement.name === 'oldValue'?????
      //********

      //Make API Request with updated info
      ...
    })
}
  

Как показано выше, я использовал forEach цикл и обновил поле name до newValue , используя действие redux.

Во время выполнения цикла я использую Store.getState().myReducer.inputList вместо this.props.inputList , думая, что получу обновленный список, но, похоже, это не так?

Из этого:

Подписчики предназначены для реагирования на само значение состояния, а не на действие. Обновления состояния обрабатываются синхронно, но уведомления подписчикам могут быть пакетными или отменены, что означает, что подписчики не всегда получают уведомления о каждом действии. Это обычная оптимизация производительности, позволяющая избежать повторного рендеринга.

Дело в том, что ваш компонент является подписчиком, и как только вы пытаетесь обновить состояние, он не может гарантировать вам, что вы получите наиболее обновленное состояние, как только вы отправите действие.

Что вам следует сделать, так это создать переменную, которую вы хотели бы сохранить в состоянии, выполнить вызов вашего API с этой переменной, а затем одновременно обновить хранилище.

 const values = [
  { id: 1, active: 1, name: 'john' },
  { id: 2, active: 1, name: 'cena' },
  { id: 3, active: 2, name: 'oldValue' },
]

onClick = () => {
  this.props.inputList
    .filter(x => x.active === 2)
    .forEach(x => {
      //Update name to 'newValue' and submit to backend

      //get updatedInfo in a variable
      const updatedInfo = values.find(y => y.name === x.name);

      //make redux redux to update the value
      this.props.reduxAction_updateValue({ value: updatedInfo});

      //Make API Request with updatedInfo variable
      ...
    })
}
  

Трудно понять, в чем может быть проблема без надлежащего примера кода (и я не могу комментировать, потому что я новичок). Но если предположить, что у вас правильно настроено хранилище, это может быть потому, что вы ожидаете получить reducer из getState, но getState просто возвращает самое последнее состояние, установленное reducer, или ваши данные настроены так, что имя reducer является именем свойства объекта данных?