探索下一代Redux中间件:redux-callbag
import { interval, map, take } from 'callbag-basics';
import { createAction } from 'redux-actions';
import { ofType } from 'redux-callbag';
// 创建一个每秒钟发送INCREMENT action的redux middleware
const incrementMiddleware = ({ getState }) => source => {
const incrementAction = createAction('INCREMENT');
const sourceWithAction = interval(1000)
.pipe(take(Infinity))
.pipe(map(() => incrementAction()));
return sourceWithAction;
};
// 使用redux-callbag将middleware连接到redux store
const epicMiddleware = createEpicMiddleware(incrementMiddleware);
// 创建一个redux store,并应用上述创建的middleware
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
const store = createStore(
reducer,
applyMiddleware(epicMiddleware)
);
// 现在每隔1秒钟,将会派发一个INCREMENT action
这个代码示例展示了如何使用redux-callbag
库创建一个简单的Redux中间件,该中间件使用callbag
的基本操作符来定期派发一个action。这种方式可以作为学习如何将reactive programming的概念引入Redux应用的一个起点。
评论已关闭