javascript - 为什么 Redux 在之前的 dispatch action 中返回旧状态？

Question

我想知道为什么我在控制台日志打印旧状态之前发送操作。如果我接下来做: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})
    }
  }
};

应用程序.js

componentDidMount(){
  this.props.dispatch(ActionCreator.setDisplay(true))
  // expected : true
  console.log(this.props.display)
  // prints : false.
}

const mapStateToProps = (state) => {
  display : state.display
}

但我可以在我的 redux 开发工具控制台中看到变化。PD 我使用 redux-thunk 作为中间件。它只是一个例子，我所有的代码看起来都不错并且运行良好，但是，这是一个问题。为什么控制台记录旧状态而不是新状态(这是逻辑，如果我在调用日志之前发送一个 Action )我会感谢你的回答，谢谢。

Answer 1

这是因为您正在使用 redux-thunk 并且您的调度是异步发生的。

this.props.dispatch(ActionCreator.setDisplay(true)) 不会立即设置 display true。

既然您没有在该操作中发出网络请求或任何异步操作，为什么不将操作创建者更改为

let ActionCreator = {
  setDisplay(value) {
    return { type: 'SET_DISPLAY',display: value};
  }
};

现在它将同步发生。也不要在调度后立即放置控制台日志。当 redux 更新状态时，旧状态不会被修改。相反，它会创建一个具有更新值的新状态实例。这个新值将通过 react-redux 的连接作为 props 传递给您的组件。尝试在 render() 方法中打印显示，您会看到它被调用了两次，第二次将显示 true。