Redux 中间件

为什么要用中间件

默认情况下redex只能处理同步数据流,实际开发的话通常用的都是异步的操作

Redux中间件的作用

处理有副作用(side effect)功能,可以处理一个功能的中间环节

Redux中间件的优势

可以串联 组合 在一个项目中使用多个中间件

Redux 中间件用来处理 状态 更新，也就是在 状态 更新的过程中，执行一系列的相应操作

使用:中间件：store.dispatch() 就是中间件封装处理后的 dispatch，但是，最终一定会调用 Redux 自己的 dispatch 方法发起状态

redux-logger中间件

edux-logger用于中间件记录日志

1.yarn add redux-logger

2.导入redux-logger

3.redux 中导入applyMiddleware 函数

4.调用 applyMiddleware() 并传入 logger 中间件作为参数

5.将 applyMiddleware() 调用作为 createStore 函数的第二个参数

//store/index.js
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import rootReducer from './reducers'

const store = createStore(rootReducer, applyMiddleware(logger))

redux-thunk中间件

使用redux-thunk中间件可以处理异步操作

// 函数形式的 action
const thunkAction = () => {
  return (dispatch, getState) => {}
}

// 解释：
const thunkAction = () => {
  // 注意：此处返回的是一个函数，返回的函数有两个参数：
	// 第一个参数：dispatch 函数，用来分发 action
  // 第二个参数：getState 函数，用来获取 redux 状态
  return (dispatch, getState) => {
    setTimeout(() => {
      // 执行异步操作
      // 在异步操作成功后，可以继续分发对象形式的 action 来更新状态
    }, 1000)
  }
}

不使用 redux-thunk 中间件，action 只能是一个对象

// 1 普通 action 对象
{ type: 'counter/increment' }
dispatch({ type: 'counter/increment' })

// 2 action creator
const increment = payload => ({ type: 'counter/increment', payload })
dispatch(increment(2))

 使用 redux-thunk后   action  既可以是函数  有可以是对象

// 1 对象：
// 使用 action creator 返回对象
const increment = payload => ({ type: 'counter/increment', payload })
// 分发同步 action
dispatch(increment(2))

// 2 函数：
// 使用 action creator 返回函数
const incrementAsync = () => {
  return (dispatch, getState) => {
    // ... 执行异步操作代码
  }
}
// 分发异步 action
dispatch(incrementAsync())

 使用的步骤

1. 安装：yarn add redux-thunk
2. 导入 redux-thunk
3. 将 thunk 添加到 applyMiddleware 函数的参数（中间件列表）中
4. 创建函数形式的 action，在函数中执行异步操作