Проблема с мутацией и асинхронным поведением в React-Redux

Question

В документации по реакции написано, что:

Для React-Redux подключение проверяет, изменились ли реквизиты, возвращаемые функцией mapStateToProps, чтобы определить если компонент нуждается в обновлении. Для повышения производительности connect использует несколько сокращений, которые полагаются на неизменность состояния, и использует неглубокие проверки равенства ссылок для обнаружения изменений. Это означает, что изменения, внесенные в объекты и массивы путем прямой мутации, не будут обнаружены, и компоненты не будут повторно отображаться.

Я думаю, что прямая мутация выглядит примерно так:

this.state.someState = 2

Что здесь означает прямая мутация в случае редукции?

Второй вопрос, который у меня есть и на который я не нахожу удовлетворительного ответа, - каков может быть побочный эффект мутации или асинхронного поведения, упомянутого в документация ниже:

Побочные эффекты, такие как мутация или асинхронное поведение, приведут к тому, что путешествие во времени изменит поведение между шагами, нарушив работу приложения.

Answer 1

Что здесь означает прямая мутация в случае редукции?

Это означает, что если ваш редуктор изменяет состояние и возвращает его:

function myReducer(state, action) {
   this.state.someState = 2
   return state
}

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

что может быть побочным эффектом мутации или асинхронного поведения

Побочный эффект мутации выглядит так:

function myReducer(state, action) {
   this.state.someState = 2
   return { someState: this.state.someState + 1 }
}

Несмотря на то, что было возвращено новое значение, предыдущее состояние было изменено на место. В результате, если вы time-travel-debug вернетесь в предыдущее состояние, вы не увидите его фактическое значение, а вместо этого 2.

Пример асинхронного c побочный эффект:

function myReducer(state, action) {
   return new Promise(res => {
     return state + 2;
   })
}

Любое асинхронное c поведение в вашем редукторе приведет к тому, что он вернет обещание, которое будет отображаться в состоянии и, вероятно, будет недопустимыми данными для ваших компонентов.

Answer 2

Что здесь означает прямая мутация в случае redux?

Это означает прямое изменение значений в хранилище Redux:

reduxState.someProperty = 2;

или прямое изменение все, что содержится в хранилище Redux.

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

Второй вопрос, который у меня есть и не найти удовлетворительного ответа на него, что может быть побочным эффектом мутации или асинхронного поведения, упомянутого в документации ниже:

Мутация и асинхронное поведение являются побочными эффектами , как сказано в цитируемом вами тексте. Также прямо в этом тексте говорится, каковы негативные последствия этого: путешествие во времени (перемотка состояния назад и вперед) не будет работать правильно, и попытка вернуться к предыдущему состоянию фактически даст вам что-то, значения которых не соответствуют что на самом деле было в том предыдущем состоянии.