探索下一代Redux中间件:redux-callbag
    		       		warning:
    		            这篇文章距离上次修改已过440天,其中的内容可能已经有所变动。
    		        
        		                
                
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应用的一个起点。
评论已关闭