Question

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

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)正在完美地完成他的工作，但更新后的状态尚未到达我的组件，当我使用超时时状态得到更新。使用超时是一个好习惯还是有更好的解决方案

Answer 1

在React中更新状态是一种异步操作，因此您无法保证在调用(require '[cats.core :as cats]) (defn -main [& [config-path]] (cats/mlet [_ (assert-config-path-e config-path) content (read-file-e config-path) raw-data (read-edn-e content) parsed (parse-e raw-data)] (cats/return (start-processing parsed)))时，您的组件已使用新状态重新呈现。

this.props.saveData()有效，因为它是告诉JS引擎等待下一个滴答的一种方式，所以它足以满足目的，但将副作用与组件逻辑耦合是一种不好的做法。

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

例如，使用redux-thunk，动作创建者返回函数而不是对象，该函数将由Redux Thunk中间件执行。这个功能不需要是纯粹的;因此允许它具有副作用，包括DB调用。 Redux Thunk为您提供了一种读取Redux商店当前状态的方法。除了dispatch之外，它还将getState作为第二个参数传递给你从thunk action creator返回的函数。

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

setTimeout

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

在Redux中使用相同功能进行更新时，状态不会更新

1 个答案: