Задержка диспетчерского действия в редуксе

Question

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

Пример, основанный на примере избыточного todo.

ДЕЙСТВИЕ

let nextTodoId = 0
export const addTodo = text => {
  console.log('action');
  return ({
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  })
}

REDUCER

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      console.log('reducer');
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

export default todos

КОМПОНЕНТ

class AddTodo extends Component {

  render() {
    var _this = this;

    return (
      <div>
        <form
          onSubmit={e => {
            e.preventDefault()
            this.props.dispatch(addTodo('input.value'))
            console.log('Not updated', this.props.todos);
            setTimeout(function() {
              console.log('Updated', _this.props.todos);
            });
          }}
        >
          <button type="submit">Add Todo</button>
        </form>
      </div>
    );
  }
}

Вывод

index.js:3 action
todos.js:4 reducer
AddTodo.js:16 Not updated []
AddTodo.js:18 Updated [{…}]

AddTodo.js: 18 Обновлено [{…}]

Answer 1

Отображение действия является асинхронным. Вам нужно будет использовать mapStateToProps, чтобы получить состояние из хранилища в вашем компоненте. Вы можете использовать componentWillReceiveProps для получения обновленных данных магазина.

Answer 2

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

render() {
 console.log(this.props.todos)
 .... // remaining code
}

Надеюсь, это поможет