React-Redux - обновление состояния на основе изменения свойства состояния

Question

Мне нужно вносить изменения в свойство состояния каждый раз, когда изменяется другое свойство.

Например:

• , когда меняется counter, мне нужно обновить peopleArray
• изменение нескольких действий counter (см. Блок Диспетчер)

Состояние:

{
  peopleArray: ['Shawn', 'Amanda', 'Jermaine']
  foodArray: []
  counter: 0
}

Диспетчер:

onAddPeople: (name) => ({ type: 'ADD_PEOPLE', payload: name }) // increments counter
onAddFood: (type) => ({ type: 'ADD_FOOD', payload: type }) // increments counter

(Часть) Редуктора: счетчик приращений каждый раз, когда добавляется новый человек

if (action.type === 'ADD_PEOPLE') {
  let updatePeople = [...state.peopleArray]
  updatedPeople.push(action.payload.name)
  return {
    ...state,
    peopleArray: updatedPeople,
    counter: counter + 1
  }
}

В основном мне нужен какой-то подписчик, который позволит чтобы я мог обновить peopleArray, но я не хочу заканчиваться бесконечным l oop.

Я попробовал следующее в файле PeopleComponent. js:

componentWillUpdate(nextProps: any) {
    if (this.props.counter !== nextProps.counter) {
        // Trigger update to peopleArray
    }
}

Проблема в том, что, как только я запускаю обновление в componentWillUpdate, меняется peopleArray, что приводит к изменению состояния ..., которое повторно отображает приложение и снова вызывает componentWillUpdate ... . введите бесконечно l oop: (

Как мне сделать это "правильно"?

Answer 1

Вам нужно пересмотреть свой дизайн. Действия - это единственные вещи, которые должны обновлять состояние избыточности, поэтому, если ADD_PEOPLE необходимо обновить счетчик, помимо добавления людей, тогда это действие должно сделать это (как вы заметили).

И наоборот, может быть действие, называемое INCREASE_COUNTER, который также должен добавлять людей.

Запуск действий в componentWillUpdate - плохой дизайн, и я настоятельно рекомендую не пытаться что-то подобное.

Причина в том, что Redux не просто рамки событий. Действия строго зарезервированы для внешнего взаимодействия между приложением и внешними источниками данных (чаще всего взаимодействие с пользователем и запросы к серверам).

Answer 2

должен быть в состоянии использовать componentDidUpdate

componentDidUpdate(prevProps) {
    if (prevProps.counter !== this.props.counter) {
        // update component state accordingly
    }
}

componentWillUpdate устарело и совершенно не рекомендуется изменять состояние в нем по причинам, которые вы описываете. Тем не менее, componentDidUpdate безопасно изменить состояние:

Вы можете немедленно вызвать setState () в componentDidUpdate (), но учтите, что он должен быть заключен в условие, как в примере выше, или вы ' приведет к бесконечному l oop. Это также вызвало бы дополнительный повторный рендеринг, который, хотя и невидим для пользователя, может повлиять на производительность компонента.

https://reactjs.org/docs/react-component.html#componentdidupdate

В данный момент я не уверен, что эта реализация приведет к бесконечному l oop. Если OP выполняет тест console.log из условия в componentDidUpdate(), не должно быть ненужных изменений состояния.