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})
    }
  }
};

app.js

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

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

但是我可以看到我的redux dev-tools控制台的变化。 PD我使用redux-thunk作为Middleware.its只是例子，我的所有代码看起来都很好并且效果很好，但是，这是一个问题。为什么控制台会记录旧状态而不是新状态（如果我在调用日志之前调度了一个动作，那么它就是ilogic）我会更新你的答案，谢谢。

Answer 1

首先，我建议不要依赖派遣行动可能是同步的事实;设计好像一切都是异步的。当您最终发送异步操作时，您将很高兴为此做好准备。

其次，你的动作创建者返回一个函数（你必须使用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}) 
    }
  }

Answer 2

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

this.props.dispatch（ActionCreator.setDisplay（true））不会立即设置显示为真。

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

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

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

为什么Redux在之前的调度操作时返回旧状态？

2 个答案: