Redux-Saga

在前端框架中,自然少不了很多中间件做数据处理, 而 redux-saga 就是其中之一. 目前它的应用不是很广泛,但是如果使用得当,将会事半功倍的效果.

什么是 redux-saga:
他是 Redux 的一个中间件,主要集中处理 react 架构中的异步处理工作,被定义为 generator的形式,采用监听的形式进行工作.

redux-saga 有哪些常用方法:
redux Effects:
Effect 是一个 js 对象,可以通过 yield 传达给 sagaMiddleware 进行执行. 如果我们应用 redux-saga , 所有的 Effect 都必须被 yield 才会执行.
例如:我们要改写下面这行代码

yield fetch( url );

应用 saga:

yield call( fetch, url )

take
等待dispatch匹配某个action
比如下面这个例子:

while ( true ) {
	yield take( 'CLICK_Action' );
	yield fork( clickButtonSaga );
}

put
触发某个 action , 作用和 dispatch 相同

yield put ( { type: 'CLICK' } );

具体例子:

import { call, put } from 'redux-saga/effects'
export function* from fetchData(action) {
	try {
		const data = yield call(Api.fetchUser, action.payload.url)
		yield put({ type: "FETCH_SUCCEEDED",data })
	}catch(error) {
		yield put({type: "FETCH_FATLED",ERROR})
	}
}

call
有阻塞的调用 saga 或者返回 promise 的函数,只在触发某个动作.

redux-saga 的优势:
传统意义讲,我们很多业务逻辑要在 action 中处理,所以会导致action 的处理比较混乱,难以维护,而且代码量比较大,如果我们应用 redux-saga 会很大程度上简化代码,redux-saga 本身也有良好的扩展性,非常方便的处理各种复杂的异步问题.