tian-qi

redux-sage 是什么?

如何使用 redux-saga ?

redux-sage 是什么?

  • redux-saga 是一个用于管理 redux 异步操作的中间件,将所有的异步操作统一在一个saga文件中进行处理,这也是redux-saga对比redux-thunk的优势之一;

如何使用 redux-saga ?

  1. npm install redux-saga 安装插件
  1. 引入插件,并将 createSageMiddleware 方法返回值注册到applyMiddleWare中
  import { createStore, applyMiddleware } from 'redux'
  // 引入redux-sage
  import createSageMiddleware from 'redux-saga'
  // 引入统一处理异步操作中间件文件
  import counterSage from './sage/counter.sage'

  // 接收createSagaMiddleware方法的返回值
  const sageMiddleware = createSageMiddleware()
  export const store = createStore(reducer, applyMiddleware(sageMiddleware))
  // 通过 run 方法运行saga
  sageMiddleware.run(counterSage)
  1. 在saga文件写入你的异步方法, 这里是counter.sage.js
// takeEvery 用于接收组件内部请求的异步action
// put 触发同步action
// delay 一个延迟方法
import {takeEvery, put, delay} from 'redux-saga/effects'

// 这里写入你的异步方法
function* increment_saync_fn(){
    // put对应与redux中的dispatch,会调用reducer, 进行state更新
    yield put({type:'xxx'}) 

}
// sage文件要求返回一个 Generator 函数
export default function* counterSage(){
    // 这里的 INCRMENT_ASYNC 就是你触发的异步action的type,increment_saync_fn 是你触发action所要执行的异步函数
    yield takeEvery(INCRMENT_ASYNC, increment_saync_fn)
}

分类:

redux

技术点:

相关文章: