Question

调用调度，并立即控制台记录数据。除非您添加一些延迟，否则它将显示旧数据而不是更新数据。

基于redux todo示例的示例。

动作

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

减速器

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

调度动作时，reducer将更新存储状态，然后mapStateToProps函数从存储中返回更新后的状态这是预期的行为，而不是将其记录在onSubmit中，而是将其记录在渲染器中

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

希望有帮助

Answer 2

调度动作是异步的。您将需要使用mapStateToProps从组件中的存储中获取状态。您可以使用componentWillReceiveProps来获取更新的商店数据。

在Redux中延迟调度动作

2 个答案: