redux-saga 简单入门使用

redux架构中，如果action里有诸如网络请求、磁盘读写等异步操作，会提示使用中间件解决。redux-saga可以用来做这件事。项目引入redux-saga后，可以让action做纯粹的action，一些有副作用的action交给saga管理。
这里介绍一个比较常用的情况，用fetch从服务端请求数据。

在管理action处会用到redux-saga中的以下接口：

• call，至少接受一个方法名，比如调用fetch方法
• put，相当于redux中的dispatch
• takeEvery，接受一个action和方法名，全局环境下时刻监听，只要dispatch这个action，便会执行相应的方法

相应代码如下：

import

import { call, put, takeEvery } from 'redux-saga/effects'

fetch

function fetchAPI() {
  return fetch(fetchUrl)
  .then(res => (
    res.json()
  ))
  .then(resJson => (
    resJson
  ))
  .catch(err => (
    err.message
  ))
  .done()
}

异步处理(async以同步形式写异步)

function* fetchUser() {
  try {
    const response = yield call( fetchAPI );
    // 或者
    // const response = yield call( fetch, fetchUrl );

    // 将上一步调用fetch得到的结果作为某action的参数dispatch，对应saga的put
    yield put({ type: 'RECEIVE_DATA_SUCCESS', data: response });
  } catch (error) {
    yield put(fetchFailure());
  }
}

注册监听函数

export default function* event() {
  // 一旦'FETCH_DATA_REQUEST'在别处被dispatch，会立即调用fetchUser这个函数，fetchUser再调用fetch，做异步处理后完成相应动作，比如成功就dispatch 'RECEIVE_DATA_SUCCESS'，进而在reducer中更新state
  yield takeEvery('FETCH_DATA_REQUEST', fetchUser);
}

以上是一个简单的redux-saga处理fetch请求的操作，最后，需要在createStore这里注册中间件才能使用。

需要引入导出的监听函数，并在store生成后run这个函数

'use strict'

// Redux
import { applyMiddleware, combineReducers, createStore } from 'redux'
import logger from 'redux-logger'

// redux saga
import createSagaMiddleware from 'redux-saga'
// 引入导出的监听函数
import rootSaga from '../sagas/index'
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  combineReducers({
    ...reducers
  }),
  applyMiddleware(sagaMiddleware, logger)
)

sagaMiddleware.run(rootSaga)

export default store;