javascript - Redux 状态修改不会在调度后立即反射(reflect)出来。调度是异步的吗？

Question

我浏览过社区，发现很多人说 redux 中的 dispatch 函数是同步的。然而，当我使用 react-redux 构建以下应用程序时，我发现一个错误似乎是由于我的调度函数的异步行为造成的。所以我想知道以下代码的原因是什么以及如何解决它(或者也许用更好的实践替换设计模式)。

它基本上是一个部分

• 用户从下拉菜单中选择一个值
• 应用程序将其存储在状态
• 应用程序读取状态，并根据用户选择的状态值使用参数查询 API。

在下拉列表中选择一个值后，提取会引发参数格式不正确的错误，因为我的查询 URL 为 example.com?param=undefined (初始状态为 未定义)。当我第二次选择时就没有这样的格式错误了(显然，因为 states 的设置至少完成了一次并且至少参数格式是正确的)

下拉菜单(使用react-select)

class Dropdown extends Component {
    onValueChange(v) {
        this.props.setSomeValue(v);
        this.props.queryData();
    }
    render() {
        return <Some-react-select-Dropdown
            value={this.props.someValue}
            onChange={this.onValueChange}
        />
    }
}

export default connect(state => {
    someValue: state.someValue
}, dispatch => {
    setSomeValue: dispatch(setSomeValue(v))
})

应用程序

class App extends Component {
    queryData() {
        fetch(`example.com?param=${this.props.someValue}`/*, ...*/).then(/*...*/)
    }
    render() {
        return <Dropdown
            queryData={this.queryData}
        />
    }
}

export default connect(state => {
    someValue: state.someValue.value // because react-select stores selected value in {label, value} format
})(App)

我希望程序能够同步执行状态设置(通过调度)和获取，以便能够成功生成查询 URL。然而(如上所述)，我第一次选择下拉值使应用程序查询初始状态为未定义的API。

Answer 1

您正确地推断出在执行此处的操作后该值尚未完成更改。

onValueChange(v) {
    this.props.setSomeValue(v); <-- creates action, updates redux-state
    this.props.queryData(); <-- executes before action above is complete.
}

您编写的两个函数正在运行中执行，但不是同步的。您可以使用 componentDidUpdate() 生命周期方法

来解决此问题

将其放入您的下拉组件中

componentDidUpdate(prevProps){
    if(prevProps.someValue !== this.props.someValue){
          this.props.queryData();
    }
}

现在，一旦确认您的 someValue 状态已更改，您就可以运行 queryData()。