React全家桶之Redux中间件（redux-thunk，redux-saga，redux-actions）

1. Redux中间件

1.1 什么是中间件 ？

中间件其实就是一个函数，中间件允许我们扩展redux应用程序 。具体体现在对action的处理能力上，当组件触发一个action后，这个action会优先被中间件处理，当中间件处理完后，中间件再把action传递给reducer，让reducer继续处理这个action

1.2 加入中间件的redux工作流程

2. 开发redux中间件

2.1redux中间件，是有一套模版的，如下：

注意：最后必须调用next (action)

// es6 箭头函数写法 
export default store => next => action => { 
 		// 执行业务逻辑 -- 最后必须调用next方法，传入action
 		next (action) 
  }

// 普通写法
export default function（ store ）{
		return function ( next ) {
				return function ( action ) {
					// 执行业务逻辑
				}
		}
}

1. 可以通过提供的store参数获取store.state获取状态，也可以通过store.dispatch去触发另外一个action
2. 最里层有个形参action ，组件触发的action对象，可以通过action.type决定要怎样处理
3. 中间next为一个函数， 中间件当中的逻辑代码执行完毕后需要调用next方法，调用next的目的是为了把当前的action传递给reducer或者传递给下一个中间件（中间件可以有多个）

2.2 注册中间件

中间件在开发完成以后只有被注册才能在redux的工作流程中生效，redux中有个applyMiddleware，作用是注册中间件

import { createStore , applyMiddleware } from ' redux '
import log from  ' ./middlewares/log'  // 自己开发的中间件

createStore（reducer ，applyMiddleware（ 
	log  //  支持传多个中间件
） ）

2.3 中间件中异步逻辑开发思路分析

1. 中间件不关心你想执行什么样的异步操作，只关心执行的是不是异步操作
2. 如果执行的是异步操作，那么在触发action的时候，传递一个函数，如果执行的是同步操作，就传递action对象
3. 异步操作代码要写在你传递进来的函数中
4. 当前这个中间件函数在调用你传递进来的函数时，要将dispatch方法传递过去

1.在中间件中做统一处理
export default （{dispatch}） => next => action => { 
		if (typeof action === 'function') {
		 		return action ( dispatch )
		}
		next (action) 
  }

2.在action中做异步操作
export const increment = payload => （{type : 'increment' , payload }）

export const increment_async = payload => dispatch => {
		setTimeout（() => {
				dispatch( increment ( payload ) )
		},2000）
}

3.在布局点击事件中调用
<button onclick={() => increment_async (5) }></button>

3. Redux常用中间件（redux-thunk）

3.1如何使用redux-thunk ？

1. 下载：npm install redux-thunk
2. 引入：import thunk from redux-thunk
3. 注册：
   import { createStore , applyMiddleware } from ’ redux ’
   createStore（reducer ，applyMiddleware（thunk ))
4. 使用redux-thunk中间件
   

4. Redux常用中间件（redux-saga）

redux-saga比redux-thunk更加强大，因为redux-saga可以将异步操作从Action Creator文件中抽离出来，放在一个单独的文件中

4.1如何使用redux-saga ？

1. 下载：npm install redux-saga

4.2创建redux-saga中间件

import createSagaMiddleware from ' redux-saga '
const sagaMiddleware = createSagaMiddleware ( )

4.3 注册sagaMiddleware

createStore (reducer , applyMiddleware (sagaMiddleware) ) 

4.4 如何使用sagaMiddleware ？

创建一个单独的文件用来写异步代码：

1. takeEvery ：接收action，当组件触发一个action的时候，在saga中可以通过takeEvery来接收这个action
2. put ：用来触发另外一个action，当异步操作返回结果后，需要通过put方法触发一个action，帮助我们把这个异步操作的结果传递给reducer，让reducer把这个数据保存在store中。
3. 要求在最后导出Creator函数，如postSaga() , 函数里面yield为固定格式。
4. takeEvery（LOAD_POSTS,load_posts），第一个参数为要接收的类型的字符串，第二个参数为当接收到类型的时候要执行的方法
5. postSaga函数接收一个形参action，postSaga（action），action中可以接收到传递的参数

4.5 启动saga

import postSaga from ‘./store/sagas/post.saga’
sagaMiddleware.run (postSaga)

5. Redux常用中间件（redux-actions）

5.1 redux-actions作用是？

redux流程中大量的样板代码读写很痛苦，使用redux-actions可以简化Action和Reducer的处理

5.2 下载

npm install redux-actions

5.3 创建Action

import  { createAction } from ' redux-actions '

const increment_action = createAction ( ' increment ' )
const decrement_action = createAction ( ' decrement ' )

5.4 创建Reducer