React笔记 （十）React中间件Redux-thunk和Redux-saga

Redux-thunk

概念：

Redux-thunk就是把store里的dispatch方法升级，在引入Redux-thunk之前dispatch方法只能接受对象，使用之后可以接受一个函数。dispatch会自动判断传入得是对象还是函数，如果是函数，会自动执行。

写法：

引入

npm install redux-thunk

store.js

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
 const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

actionCrrators.js
在actionCrrators可以定义一个函数把异步请求放在这里,之后在方法里执行dispatch方法。

export const getTodoList = () => {
  return (dispatch) => {
    const data = ["唱","跳","rap"];
    const action = initListAction(data);
    dispatch(action);
  }
};

在使用的时候直接把这个函数当成action传进去就可以了。

import {  getTodoList } from '../store/actionCrrators.js'
const action = getTodoList();
store.dispatch(action);

Redux-saga

概念：

与Redux-thunk类似，都是Redux的中间件，但是他更复杂也具有更多的API，并且可以单独的抽出一个文件来管理异步请求方法。

写法

npm install --save redux-saga

store.js

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducer from './reducers'
import mySaga from './sagas'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

sagaMiddleware.run(mySaga)

sagas.js

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

function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}
function* mySaga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

Redux-saga官网