解决redux中state更新是异步的问题

  在开发的过程中突然发现了一个非常诡异的问题,伪代码如下:

this.props.dispatch(updateData(value)) // 1
console.log(this.props.data)//2 状态没有更新
setTimeout(() => //3 状态发生了更新)

  于是猜想redux执行action应该是同步的,但是reducer中将新状态返回更新store数据仓库的过程应该是异步的.所以当上面1处修改store中的数据,2中获取时却不是更新的数据,因为此时store仓库的数据还未更新.

  通过搜索相关网页得到一些启示:组件通过react-redux封装后相当于包了一层高阶组件。而这一个高阶组件在redux里的state更新时会调用setState,所以它的store的数据仓库更新才会是异步的过程.

  解决方法:

  action中:

export const updateData = (value) => dispatch => {
  dispatch({
    type: 'UPDATE_DATA',
    value,
  });
  return Promise.resolve();//通过返回promise解决状态异步更新的问题
};

组件中使用:

this.props.actions.updateData(value).then(()=>{
    console.log(this.props.data) //状态更新了,获取到的是最新的状态值
    ...
})