redux redux-saga实现异步方法

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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章