Question

我遍历整个社区，发现许多人说dispatch中的redux函数是同步的。但是，当我使用react-redux构建以下应用程序时，似乎是由于我的调度功能的异步行为而发现了一个错误。因此，我想知道以下代码的原因是什么，以及如何解决它（或者用更好的实践替换设计模式）。

基本上是

的一部分

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

在下拉列表中选择一个值之后，由于我的查询URL为example.com?param=undefined（初始状态为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。但是（如上所述），我第一次选择下拉值使应用程序查询初始状态为undefined的API。

Answer 1

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

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

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

来解决此问题

将其放入您的 Dropdown 组件

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

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

Redux指出修改不会在分派后立即反映出来。调度是异步的吗？

1 个答案: