Почему Redux возвращает старое состояние при отправке действия раньше?
Я хочу знать, почему, когда я отправляю действие до того, как мой журнал консоли печатает старое состояние. если я сделаю следующее: reducer.js
let initialState = { display: false };
const MyReducer = (state = initialState,action) => {
...
case 'SET_DISPLAY':
return { update(state,{ display : {$set: action.display } }) }
break;
default:
return state;
break;
}
ActionCreator.js
let ActionCreator = {
setDisplay(value) {
return(dispatch,getState) {
dispatch({ type: 'SET_DISPLAY',display: value})
}
}
};
app.js
componentDidMount(){
this.props.dispatch(ActionCreator.setDisplay(true))
// expected : true
console.info(this.props.display)
// prints : false.
}
const mapStateToProps = (state) => {
display : state.display
}
но я вижу изменения в моей консоли redux dev-tools. PD Я использую redux-thunk в качестве промежуточного программного обеспечения. Это просто пример, весь мой код кажется хорошим и отлично работает, но это вопрос. Почему консоль регистрирует старое состояние вместо нового (это нелогично, если я отправил действие до журнала вызовов), я буду признателен за ваши ответы, спасибо.
Спасибо за ответ. Когда я использую простой объект (простой объект), Action Creator не работает. setDisplay () {return {type: 'ENABLE_DISPLAY'}}, я не могу использовать условные выражения, например: ComponentDidMount () {this.props.dispatch ({type: 'ENABLE_DISPLAY'}); if (this.props.display_is_enabled) {// делать что-нибудь}}, потому что получает старое состояние, но в моей консоли redux я вижу правильное состояние (обновлено). Console.log не отображает никаких ошибок. :(
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Во-первых, я бы рекомендовал не полагаться на тот факт, что отправка действия может быть синхронной; дизайн, как если бы все было асинхронно. Когда в конце концов вы отправите асинхронные действия, вы будете рады, если ваше мышление будет готово к этому.
Во-вторых, ваш создатель действия возвращает функцию (вы должны использовать промежуточное программное обеспечение thunk), поэтому вы получаете такое поведение.
componentDidMount(){
startSomethingAsync();
}
componentDidUpdate(){
if (!this.props.asyncCompleted) return;
if (this.props.asyncResultFn) {
this.props.dispatch({ type: ... value: VALUE_CONDITIONAL_TRUE})
}
else{
this.props.dispatch({ type: ... value: VALUE_CONDITIONAL_FALSE})
}
}
Я уже использую redux-thunk. Можете привести один простой пример, который может это решить? Спасибо за ответ.
Спасибо, итак ... как я могу справиться с этим в моем логическом компоненте? Мне нужно сделать в ComponentDidMount, у меня не работает метод рендеринга. Я хочу сделать что-то подобное ... componentDidMount() => this.props.asyncFunction() if (this.props.asyncResultFn) { this.props.dispatch({ type: ... value: VALUE_CONDITIONAL_TRUE}) }else{ this.props.dispatch({ type: ... value: VALUE_CONDITIONAL_FALSE }) } извините, я заблудился.
«Во-вторых, ваш создатель действий имеет форму создателя асинхронных действий (вы должны использовать промежуточное программное обеспечение преобразователя), поэтому вы получаете такое поведение». - @Sylvain, почему ты думаешь, что это асинхронно? И redux, и редукционный преобразователь являются синхронным кодом, и код ActionCreator OP также не является асинхронным. (Конечно, события жизненного цикла React возникают асинхронно, но вы заключаете, что асинхронность присутствует из-за использования промежуточного программного обеспечения thunk)
@RobertMonfera, потому что этот создатель действия возвращает функцию, которая возвращает действие, а не простое действие.
@Sylvain сам по себе этот факт не делает его асинхронным, если нет какого-либо условия if, что если это функция, то она будет делать что-то асинхронно, я что-то упускаю? Связанный мной код просто вызывает функцию синхронно: github.com/reduxjs/redux-thunk/blob/master/src/index.js#L3-L 4 Функция OP тоже не кажется асинхронной.
@RobertMonfera нет, это не делает его асинхронным как таковым. Но это причина, по которой люди используют redux-thunx: для выполнения асинхронных вызовов. Когда асинхронная операция завершится, вы можете снова обновить состояние dispatch (т.е. {type:FETCH_COMPLETE}).
@Sylvain: да, это частая причина, но не причина - есть много синхронного использования redux-thunk. Поскольку создатель действия OP (и, конечно, редуктор) синхронны, неправильно говорить, что «ваш создатель действия находится в форме создателя асинхронного действия», поэтому это не может быть объяснением. Может быть переформулировано без потерь для вашего намерения, как «ЕСЛИ ваш создатель действия находится в форме создателя асинхронного действия (как это часто бывает, хотя ваш пример кода синхронный), ТОГДА вы МОЖЕТЕ получить такое поведение» - можно ответить вопрос, отличный от поставленного, если он ясен.
Это потому, что вы используете redux-thunk и ваша отправка происходит асинхронно.
this.props.dispatch (ActionCreator.setDisplay (true)) не сразу установит отображение true.
Поскольку вы не делаете сетевой запрос или что-то асинхронное в этом действии, почему бы вам не изменить создателя действия на
let ActionCreator = {
setDisplay(value) {
return { type: 'SET_DISPLAY',display: value};
}
};
Теперь это будет происходить синхронно. Также не помещайте консольный журнал сразу после отправки. По мере обновления состояния redux старое состояние не изменяется. Вместо этого он создает новый экземпляр состояния с обновленным значением. Это новое значение будет передано вашему компоненту в качестве реквизита через соединение response-redux. Попробуйте распечатать display в методе render (), вы увидите, что он вызывается дважды, а второй будет отображать true.
Спасибо, но не работает. Component.js componentDidMount(){ this.props.setDisplay(true); if (this.props.display === false){ // its false }else{ // true } } Моя консоль печатает: {type: "SET_DISPLAY", display: true} его false Почему? в методе рендеринга console.info сообщает обновленное значение магазина.
В React есть методы жизненного цикла, такие как componentDidMount (), componentDidUpdate () render () и т. д. ComponentDidMount () будет вызываться во время первоначального монтирования компонента с props и состоянием, переданным изначально компоненту.
Когда вы обновляете redux store в componentDidMount (), он просто обновляет redux store, а не ваши реквизиты компонентов. React-Redux отслеживает любые изменения состояния и передает их компонентам, которые не происходят в одном потоке. поэтому сразу после отправки ваш реквизит будет отражать сам старый реквизит.
Когда новые реквизиты передаются компоненту через соединение, компонент повторно выполняет рендеринг, он снова выполняет render (), но componentDidMount () больше не будет выполняться. поэтому рендер вызывается дважды.
Действительно хороший ответ, очень полный, спасибо! Я совершенно забыл об этом. Итак, какой метод жизненного цикла вы предлагаете для обработки изменения состояния моего хранилища? (последний вопрос, извините за это.) Может быть, componentDidUpdate? componentDidUpdate => () {if (this.props.display) // делаем что-нибудь ..} работает довольно хорошо.
Ваш создатель экшена выглядит странно, вы уверены, что это правильно? Смена вообще не происходит, или ее просто нет в
componentDidMount?