我有一个更新应用程序通知状态的操作。通常，该通知将是一个错误或某种类型的信息。然后，我需要在5秒后分派另一个动作，将通知状态返回到初始状态，因此没有通知。这背后的主要原因是提供通知在5秒后自动消失的功能。
我没有运气使用setTimeout和返回另一个动作，无法找到这是如何在线完成的。所以任何建议都是欢迎的。
当前回答
正确的方法是使用Redux坦克，这是一个 Redux的流行中间件，根据Redux坦克文档:
Redux坦克中间件允许你编写动作创建者 返回一个函数而不是一个动作。坦克可以用来拖延时间 一个动作的调度，或者只有在某种条件下才进行调度 是满足。内部函数接收存储方法的调度和 getState作为参数”。
基本上它会返回一个函数，你可以延迟分派或者把它置于条件状态。
所以像这样的东西会帮你完成工作:
import ReduxThunk from 'redux-thunk';
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
function increment() {
return {
type: INCREMENT_COUNTER
};
}
function incrementAsync() {
return dispatch => {
setTimeout(() => {
// Yay! Can invoke sync or async actions with `dispatch`
dispatch(increment());
}, 5000);
};
}
其他回答
如果希望对选择性操作进行超时处理，可以尝试中间件方法。 我遇到过一个类似的问题，有选择地处理基于承诺的行为，这个解决方案更灵活。
假设你的动作创造者是这样的:
//action creator
buildAction = (actionData) => ({
...actionData,
timeout: 500
})
Timeout可以在上述操作中包含多个值
以毫秒为单位的数字-用于指定的超时时间 True -用于固定的超时时间。(在中间件中处理) 未定义—用于立即分派
你的中间件实现看起来是这样的:
//timeoutMiddleware.js
const timeoutMiddleware = store => next => action => {
//If your action doesn't have any timeout attribute, fallback to the default handler
if(!action.timeout) {
return next (action)
}
const defaultTimeoutDuration = 1000;
const timeoutDuration = Number.isInteger(action.timeout) ? action.timeout || defaultTimeoutDuration;
//timeout here is called based on the duration defined in the action.
setTimeout(() => {
next (action)
}, timeoutDuration)
}
现在，您可以使用redux将所有操作路由到这个中间件层。
createStore(reducer, applyMiddleware(timeoutMiddleware))
你可以在这里找到一些类似的例子
你可以用redux-thunk做到这一点。redux文档中有关于setTimeout等异步操作的指南。
Redux本身是一个非常冗长的库，对于这样的东西，你必须使用像Redux-thunk这样的东西，它会提供一个分派函数，所以你将能够在几秒钟后分派关闭通知。
我已经创建了一个库来解决诸如冗长性和可组合性等问题，您的示例将如下所示:
import { createTile, createSyncTile } from 'redux-tiles';
import { sleep } from 'delounce';
const notifications = createSyncTile({
type: ['ui', 'notifications'],
fn: ({ params }) => params.data,
// to have only one tile for all notifications
nesting: ({ type }) => [type],
});
const notificationsManager = createTile({
type: ['ui', 'notificationManager'],
fn: ({ params, dispatch, actions }) => {
dispatch(actions.ui.notifications({ type: params.type, data: params.data }));
await sleep(params.timeout || 5000);
dispatch(actions.ui.notifications({ type: params.type, data: null }));
return { closed: true };
},
nesting: ({ type }) => [type],
});
因此，我们在异步动作中组合同步动作来显示通知，这可以请求一些后台信息，或者稍后检查通知是否被手动关闭。
Redux操作只能返回一个普通对象，而不是函数、回调或异步进程。为了通过web API(如timeout()方法)分派它们，你必须使用redux-thunk中间件。创建它是为了处理这样的流程。
首先通过文档配置redux-thunk 第二，这样改变你的动作创建器:
const yourAction = millisecond => dispatch => {
setTimeout(() => {
dispatch({
type: 'YOUR_ACTIION_TYPE',
payload: yourWhatEverPayload
})
}, millisecond)
}
正确的方法是使用Redux坦克，这是一个 Redux的流行中间件，根据Redux坦克文档:
Redux坦克中间件允许你编写动作创建者 返回一个函数而不是一个动作。坦克可以用来拖延时间 一个动作的调度，或者只有在某种条件下才进行调度 是满足。内部函数接收存储方法的调度和 getState作为参数”。
基本上它会返回一个函数，你可以延迟分派或者把它置于条件状态。
所以像这样的东西会帮你完成工作:
import ReduxThunk from 'redux-thunk';
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
function increment() {
return {
type: INCREMENT_COUNTER
};
}
function incrementAsync() {
return dispatch => {
setTimeout(() => {
// Yay! Can invoke sync or async actions with `dispatch`
dispatch(increment());
}, 5000);
};
}
