将setInterval与redux-thunk一起使用的方法如下:
import { createAction } from 'redux-actions';
export const startTimer = createAction('START_TIMER');
export const startTimerAsync = () => {
return (dispatch) => {
dispatch(startTimer());
setInterval(() => {
// 在这里执行定时任务的逻辑
dispatch(anotherAction());
}, 1000);
};
};
import { handleActions } from 'redux-actions';
const initialState = {
timerStarted: false
};
const reducer = handleActions(
{
START_TIMER: (state) => ({
...state,
timerStarted: true
})
},
initialState
);
export default reducer;
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { startTimerAsync } from './actions';
const MyComponent = ({ startTimerAsync, timerStarted }) => {
useEffect(() => {
if (!timerStarted) {
startTimerAsync();
}
}, [startTimerAsync, timerStarted]);
return <div>My Component</div>;
};
const mapStateToProps = (state) => ({
timerStarted: state.timerStarted
});
export default connect(mapStateToProps, { startTimerAsync })(MyComponent);
这样,当组件渲染时,会检查timerStarted的状态,如果为false,则调用startTimerAsync action来启动定时器。定时器会每秒触发一次,并在每次触发时执行另一个action。
这种方法可以用于实现定时任务,例如轮询服务器数据、定时更新UI等场景。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云