本文已参与[新人创作礼]活动，一起开启掘金创作之路

一.为什么

场景

获取数据时，如何发ajax拿数据，并保存到redux中？

正常思路

在业务组件中发请求，拿到数据之后，再dispath

使用中间件

在业务组件中直接dispatch，在dispatch中发请求，然后保存redux

注：此时没有使用中间件在dispatch中使用函数会报错提示

二.是什么

什么是中间件( `middleware`)

在不损害原功能的前提下，引入额外的代码来拓展功能。

例如插座，把电传递给电子产品

什么是`Redux`中间件

中间：在 dispatch action 和到达 reducer 之间

没有中间件

dispatch(action) => reducer。用来发起状态更新

有了中间件

dispatch(action) => 执行中间件代码 => reducer

dispatch() 就是中间件封装处理后的 dispatch，一般配合Action creator使用，最后再调用Redux库提供的 dispatch 方法

三.redux-中间件-redux-thunk

描述

redux-thunk 中间件允许redux处理函数形式的 action。在函数形式的 action 中就可以执行异步操作代码，完成异步操作。

步骤

1.下包

yarn add redux-thunk

2.引入

store/index.js

//引入添加到中间件列表的方法applyMiddleware
import { legacy_createStore,applyMiddleware } from 'redux'
import rootReducer from './reducer'
// 引入中间件
import thunk from 'redux-thunk'
// 使用中间件，调用applyMiddleware将 thunk 添加到中间件列表中
const store = legacy_createStore(rootReducer,applyMiddleware(thunk))
export default store

3.使用action creator

src\todo\store\actions\todos.js

import axios from 'axios'
export const  Header=(payload)=>{
  const fn=async (dispatch)=>{
  const res=await axios({
    method:'POST',
    url:'***'
  })
  console.log(res,'res');
 dispatch({type:'todo/add',payload}) 
 console.log('1');
  }
  return fn
}

引入

src\todo\components\TodoHeader.js

import  {Header as add} from '../store/actions/todos'
          dispatch(
            add(name)
          )

四.redux-中间件-redux-logger

能查看redux的操作日志

与上面唯一的不同是在配置redux

import { legacy_createStore,applyMiddleware } from 'redux'
import rootReducer from './reducer'
// 引入中间件
import thunk from 'redux-thunk'
import logger from 'redux-logger'
// 使用中间件
// const store = legacy_createStore(rootReducer,applyMiddleware(thunk,logger))
const store = legacy_createStore(rootReducer,applyMiddleware(logger,thunk))
export default store

可设置提前显示log，或者后显示log

五.课外小知识：

1.redux拓展优化action creator

它是一个函数。
作用：用来创建指定类型的action。
入参：payload
返回值: action

export const addAction = (payload) => ({type: 'book/add', payload})

2.redux拓展优化Action Type

在 store 目录中创建 actionTypes 目录或者 constants 目录，集中处理
使用常量来存储 action type，一般使用大写字母。

export const SET_NAME = 'user/setName'
export const SUB_MORE = 'money/subMore'

3.redux-devtools-extension的使用

方便在浏览器中调试redux操作的工具

先要安装 redux的开发者工具，再安装redux调试工具

文档 redux-devtools-extension

步骤

安装react开发者工具（chrome浏览器插件）
安装redux的开发者工具（chrome浏览器插件）
在项目中安装redux调试工具，它是一个npm包。 npm i redux-devtools-extension -D
配置。在store/index.js中进行配置和导入

import { createStore, applyMiddleware } from 'redux'
//引入
import { composeWithDevTools } from 'redux-devtools-extension'
//配置：将第二个参数包住
const store = createStore(reducer, composeWithDevTools(applyMiddleware(中间件..)))

export default store

Redux-中间件