Redux-Saga在React工程架构之的应用实践详解

前言

React的作用View层次的前端框架，自然少不了很多中间件（Redux Middleware）做数据处理, 而redux-saga就是其中之一，目前这个中间件在网上的资料还是比较少，估计应用的不是很广泛，但是如果使用得当，将会事半功倍的效果，下面仔细介绍一个这个中间件的具体使用流程和应用场景。

redux-saga简介

Redux-saga是Redux的一个中间件，主要集中处理react架构中的异步处理工作，被定义为generator(ES6)的形式，采用监听的形式进行工作。

redux-saga安装

使用npm进行安装：

npm install --save redux-saga

或者使用yarn:

yarn add redux-saga

redux-saga常用方法解释

redux Effects

Effect 是一个 javascript 对象，可以通过 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(