Redux-saga

462 阅读1分钟


概念:

Redux-saga是一个用于管理redux应用异步操作的中间件,Redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理,可以用来代替Redux-thunk中间件,独立一个文件进行处理

具体形式:

       1.reducer负责处理action的stage更新

       2.sagas负责协调那些复杂或者异步的操作

原理

  • Redux-saga是通过genetator函数创建的
  • sagas监听发起的action,然后决定基于哪个action来做什么
  • 在Redux-saga中,所以的任务都通过yield Effects来完成
  • Redux-saga为各项任务提供了各种Effects创建器,让我们可以用同步的方式来写异步代码
  • 名词:put(action) takeEvery(actionTypes,方法)


运行

 

使用

安装 npm install --save redux-saga

目录结构




在store新建saga.js




在store下的index引用saga

import {createStore,applyMiddleware,compose} from 'redux';
import reducer from './reducer';
/*使用redux-sagas*
/import createSagaWiddleware from "redux-saga"
import mySaga from "./saga"
const sagaMiddleware = createSagaWiddleware();
const composeEnhancers =    
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?        
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(    
  applyMiddleware(sagaMiddleware),
);
const store = createStore(reducer,enhancer);
sagaMiddleware.run(mySaga);
export default store;

GitHub路径

github.com/wzb54976576…