react-redux 商店没有在 onClick 函数中更新

Question

我遇到了这个奇怪的问题，我的 react-redux 存储正在更新，但在调用操作的函数中没有更新。

this.props.active是undefined，然后我用this.props.actions.activeSet(activeProc)将它设置为整数，但它仍然是undefined并进入下一个if条件。

我知道我的应用程序正在运行，因为其他一切都适用于具有正确值的 this.props.active。

这应该发生吗？

编辑：

经过一些测试，onClick 函数内部的状态似乎保持不变。

在 onClick 函数中对console.log(this.props) 的所有调用均未显示状态更改，但在末尾添加setTimeout(() => {console.log(this.props)}, 1) 进行测试表明状态正在更新。

应用的其他部分正在按预期工作，状态更改会立即应用。

但我还是不明白发生了什么。

组件功能代码

() => {
    console.log(this.props.active); // undefined
    if (this.props.active === undefined && this.props.readyQueue.length > 0) {
        let activeProc = this.props.readyQueue[0];
        this.props.actions.readyPop();
        this.props.actions.activeSet(activeProc); // set to an integer
        this.props.actions.execStateSet("Running");
    }

    console.log(this.props.active); // still remains undefined
    if (this.props.active === undefined) {
        this.props.actions.execStateSet("Idle");
    }
}

function mapStateToProps(state, props) {
    return {
        active: state.ProcessReducer.active,
    };
}

操作代码

export const activeSet = (procId) => {
    return {
        type: 'ACTIVE_SET',
        procId
    }
}

reducer 代码

case 'ACTIVE_SET':
    return Object.assign({}, state, {
        active: action.procId
    });

Answer 1

您的 Redux 状态会与您的操作调度同步更新。 dispatch 调用返回时，您的 reducer 已经执行。

但是，React 不是 Redux。 Redux 告诉 React-Redux 的包装器组件状态已经改变。这也发生在dispatch 返回之前。

React-Redux 然后通过调用 forceUpdate 告诉 React 该组件需要重新渲染。然后 React 会一直等到它觉得是处理这个问题的好时机。我没看过，但它可能使用 setImmediate 或等效的，但它是异步的。这允许 React 批量更新，也许还有其他原因。

无论如何，React-Redux 包装器组件将在时机成熟时由 React 呈现，它会使用您的 mapStateToProps 将props 从状态中提取出来，然后将它们作为 props 传递给 React你的实际组件。然后，当 React 觉得合适的时候，它会调用你的 render 方法或函数。在此之前它可能会做各种各样的事情，比如调用componentWillReceiveProps或者渲染一些其他也需要渲染的组件。无论如何，这不关我们的事。 React 做它的事。但是当你的 Render 函数被调用时，你的 props 现在会反映新的状态。

您不应依赖 onClick 处理程序中的新状态。 onClick 应该只调用绑定动作创建者，我想现在更恰当地称为动作调度程序。如果需要对新状态做一些事情，你应该使用 Redux-Thunk 中间件并创建一个 thunked action creator。它们可以访问getState，如果它们不执行任何内部异步操作，那么整个操作实际上可以像简单的调度一样同步（不是你在简单的onClick 处理程序中需要它）。

最后，React 本质上是非常异步的。把它想象成告诉 React 你想要什么（组件 + 道具）并让 React 从那里得到它。如果 React 需要知道如何将组件转换为 DOM 元素，它会调用组件的 render 函数。 React 如何或何时做事是我们不关心的实现细节。