1、安装
cnpm install redux-saga --save
2、引入,在创建store的文件中引入
import {createStore,applyMiddleware} from 'redux';
import createSagaMiddleware from 'redux-saga'
3、创建中间件
const sagaMiddleware = createSagaMiddleware()
4、使用中间件
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
5、单独创建一个saga文件来处理异步请求,内部使用es6的Generator函数然后导出
当组件派发action后,saga也会接收到,通过匹配action中的type来进行相应操作
所以引入action-type,目的是通过type来匹配
引入actions.js,异步获取到数据后通过同步的action来更新store的状态
import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import {x,xx} from './action-type'
import {x1,xx1} from './actions' 对应reducer中的action,相当于使用redux-thunk时的同步action
function* 回调方法()
{
异步操作
try{
const res=yield 异步方法;
yield put(x1(res.data)); 通过派发action更新数据
}catch(e)
{
获取数据失败的情况
}
}
function* xxx()
{
yield takeEvery(x,回调方法);
}
export defaut xxx
takeEvery:捕捉每一个action的类型,然后执行回调方法,支持并发同时处理多个相同action
takeLatest :不支持并发,如果之前已经有一个action在处理中,再执行一个相同的action,前面的action会被取消
put:相当于dispatch
call:用来调用函数,也可以不使用它,直接调用函数
yield call(函数,参数1,参数2,..)
6、运行导出的saga中的函数,在创建的store文件中
import xx from './x'
sagaMiddleware.run(xx)
7、在action-type.js和actions.js中写对应saga的相应代码
对应的type类型是saga用于接收的type,不是reducer,在saga中调用reducer的action来改变状态
actions.js中返回正常对象即可
{type:xxx,data:xxx}
8、组件中派发用于saga的action
import {y,yy} from '../redux/actions'
props.y或store.dispatch.yy后,reducer和saga文件都会接收这个action
redux redux-saga实现异步方法
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.