在 Redux 中更新相同功能时状态不更新答案

【问题标题】：State not updating when update in same function in Redux在 Redux 中更新相同功能时状态不更新
【发布时间】：2016-08-29 13:43:07
【问题描述】：

我正在创建一个任务管理应用程序（在 React、Redux 中），它有一个任务网格。网格行有一个任务名称、任务描述和状态（活动/待定）和一个保存按钮来保存更改数据库。用户可以编辑任务并保存。还有一个标记活动按钮，它将任务的状态更改为活动状态（也将其保存在数据库中）。标记活动代码是这样的

markActive(taskId){
this.props.markActive(taskId);/*update the state*/
this.props.saveData();/*send the updated state to database*/

}

我的问题是当我保存数据时，任务的状态在数据库中没有发生变化。
但这行得通

markActive(taskId){
this.props.markActive(taskId);
setTimeout(
    ()=>{this.props.saveData();}
    ,0
)

}

问题是this.props.markActive(taskId) 正在完美地完成他的工作，但是更新的状态还没有到达我的组件，当我使用超时时，状态得到更新。使用超时是一个好习惯还是有更好的解决方案

【问题讨论】：

标签： android reactjs redux state

【解决方案1】：

在 React 中更新状态是一个异步操作，因此您无法保证当您调用 this.props.saveData() 时，您的组件已经使用新状态重新渲染。

setTimeout 之所以有效，是因为它是一种告诉 JS 引擎等待下一个滴答声的方式，所以它足以达到目的，但将副作用与组件逻辑结合起来是一种不好的做法。

处理此异步流的更好方法是使用 redux 中间件，例如 redux-thunk 或 redux-saga，将这些副作用隔离在应用程序的不同部分。

以 redux-thunk 为例，动作创建者返回一个函数而不是一个对象，该函数将由 Redux Thunk 中间件执行。这个函数不需要是纯函数；因此，它可以产生副作用，包括 DB 调用。 Redux Thunk 为您提供了一种读取 Redux 存储当前状态的方法。除了分派之外，它还将 getState 作为第二个参数传递给您从 thunk 动作创建器返回的函数。

所以你可以有一个动作创建者，例如：

function markActiveDbSync(taskId) {
    return function(dispatch, getState) {
        dispatch(markTaskAsActive(taskId));
        // redux store state updated properly, now you are good to go to sync with your DB
        saveDataToDb(getState());
     }
}

为了进一步参考，我建议你也检查一下 Redux 中Async Actions 的概念。

【讨论】：