redux中间件redux-thunk&redux-saga入门

什么是中间件？

实际上就是对dispatch的封装 ， 对dispatch的一次升级 ，之前只能接受对象，现在也能接受函数了 ，用 redux-thunk 对它进行了升级

其他中间价还有，例如 redux-logger 记录每次 action每次派发的日志
例如 redux-saga 解决react中异步问题的一个中间件， 不同于react-thunk，
react-thunk是把 异步操作放到action里操作
而 redux-saga 采用的处理逻辑是 单独的把异步的逻辑拆分出来放到另一个文件里去管理

=======================================================================================

redux-thunk 中间件 git : https://github.com/zalmoxisus/redux-devtools-extension
使用了 redux-thunk 返回的东西可以是一个函数
只有用了 thunk ，action才能是一个函数
如果action 传了一个 对象，dispatch方法会直接把action传递给store
如果action 传了一个 函数， dispatch方法 不会直接把 函数传递给store ，dispatch会让这个函数先执行，需要调用store的时候 再去调store
dispatch 做了一个事情， 会根据参数的不同执行不同的事情，
用了redux-thunk ， 可以把 写在 生命周期里面的 异步请求数据的方法，都抽出来，写在 actionCreators.js 文件里，
避免组件的生命周期函数太大，后期当我们去做自动化测试的时候， 去测试一些异步的方法，非常的简单， 比测试组件生命周期要简单的多

=======================================================================================

redux-saga 的使用
git https://github.com/redux-saga/redux-saga

可以用 redux-saga 代替 redux-thunk ，项目开发中只用其中一种

npm install --save redux-saga

index.js

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

// 创建 saga 中间件
const sagaMiddleware = createSagaMiddleware()
// 挂载在 Store 上
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

sagas.js
saga 文件必须要求是 generator函数
思想：以前接受action 是在 reducer里面，现在有了saga 直接在sagas.js里面的 takeEvery 方法，来捕获派发出来的action

例如

sagas.js
function* mySaga() {
   yield takeEvery(getInitList , fetchUser)
}

捕获 getInitList 对应的action type值，来调用 sagas.js 文件里的 fetchUser 方法
saga.js 里 通过 put方法 来把处理后的action发到 store里面 ,如果担心 sagas.js里面 请求数据失败 用try catch 来包裹
例如
sagas.js

function* getInitList(){
    try {
        const res = yield  axios.get('./list.json')
        const action = initListAction(res.data)
        yield put(action)
    }catch(e){
        console.log('list.json 网络请求失败')
    }
}

redux-thunk redux-saga 区别

redux-saga 比 redux-thunk负责的多，redux-saga 有非常多的API ，非常大型的项目建议用 redux-saga
redux-thunk 只是返回东西多里一个 函数
redux-thunk 把异步代码放到 action 里面去， redux-saga 单独写在 sagasl.js 文件里面

中间件总结 ：

是位于 组件和 store中间，对dispatch的升级