我有一个更新应用程序通知状态的操作。通常，该通知将是一个错误或某种类型的信息。然后，我需要在5秒后分派另一个动作，将通知状态返回到初始状态，因此没有通知。这背后的主要原因是提供通知在5秒后自动消失的功能。
我没有运气使用setTimeout和返回另一个动作，无法找到这是如何在线完成的。所以任何建议都是欢迎的。
当前回答
你可以用redux-thunk做到这一点。redux文档中有关于setTimeout等异步操作的指南。
其他回答
这很简单。使用trim-redux包，在componentDidMount或其他地方这样写，并在componentWillUnmount中杀死它。
componentDidMount() {
this.tm = setTimeout(function() {
setStore({ age: 20 });
}, 3000);
}
componentWillUnmount() {
clearTimeout(this.tm);
}
在尝试了各种流行的方法(动作创造者，坦克，传奇，史诗，效果，自定义中间件)后，我仍然觉得可能还有改进的空间，所以我在这篇博客文章中记录了我的旅程，在React/Redux应用程序中我应该把我的业务逻辑放在哪里?
就像这里的讨论一样，我尝试对比和比较各种方法。最终，我引入了一个新的redux-logic库，它的灵感来自史诗、传奇故事和自定义中间件。
它允许您拦截验证、验证、授权的操作，并提供了一种执行异步IO的方法。
一些常见的功能可以简单地声明，如debashing、节流、取消，并且只使用来自最新请求的响应(takeLatest)。Redux-logic包装为您提供此功能的代码。
这使您可以随心所欲地实现核心业务逻辑。除非你愿意，否则你不必使用可观察对象或生成器。使用函数和回调，承诺，异步函数(async/await)等。
做一个简单的5s通知的代码是这样的:
const notificationHide = createLogic({ // the action type that will trigger this logic type: 'NOTIFICATION_DISPLAY', // your business logic can be applied in several // execution hooks: validate, transform, process // We are defining our code in the process hook below // so it runs after the action hit reducers, hide 5s later process({ getState, action }, dispatch) { setTimeout(() => { dispatch({ type: 'NOTIFICATION_CLEAR' }); }, 5000); } });
在我的repo中，我有一个更高级的通知示例，其工作原理类似于Sebastian Lorber所描述的，您可以将显示限制为N个项目，并通过任何排队的项目进行旋转。Redux-logic通知示例
我有各种redux-logic jsfiddle现场的例子，以及完整的例子。我还在继续写文档和例子。
我很想听听你的反馈。
你可以用redux-thunk做到这一点。redux文档中有关于setTimeout等异步操作的指南。
Redux操作只能返回一个普通对象，而不是函数、回调或异步进程。为了通过web API(如timeout()方法)分派它们，你必须使用redux-thunk中间件。创建它是为了处理这样的流程。
首先通过文档配置redux-thunk 第二，这样改变你的动作创建器:
const yourAction = millisecond => dispatch => {
setTimeout(() => {
dispatch({
type: 'YOUR_ACTIION_TYPE',
payload: yourWhatEverPayload
})
}, millisecond)
}
这可能有点离题，但我想在这里分享它，因为我只是想在给定超时后从状态中删除警报，即自动隐藏警报/通知。
我最终在<Alert />组件中使用setTimeout()，以便它可以在给定id上调用和分派REMOVE操作。
export function Alert(props: Props) {
useEffect(() => {
const timeoutID = setTimeout(() => {
dispatchAction({
type: REMOVE,
payload: {
id: id,
},
});
}, timeout ?? 2000);
return () => clearTimeout(timeoutID);
}, []);
return <AlertComponent {...props} />;
}
