【react】react18的学习（六）--redux中间件

上一篇：react18的学习（五）–样式私有化

中间件

redux提供的中间件功能，用于在派发操作之前进行操作；具体中间件是第三方封装的；

redux-logger

打印redux派发状态的日志，涉及更新前状态值、更新操作、更新后状态值等；

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

const store = createStore(reducer, applyMiddleware(logger))
export default store

redux-thunk

内部会触发两次dispatch派发，第一次由中间件内部的派发，获取返回的异步函数，然后执行异步函数进行第二次派发；

redux-promise（更方便）

同上派发两次，reducers都只执行一次，就是action的异步配置不同；

import { applyMiddleware, createStore } from 'redux'
import logger from 'redux-logger'
import promise from 'redux-promise'
import thunk from 'redux-thunk'
import reducer from './reducers'

const store = createStore(reducer, applyMiddleware(logger, thunk或promise))
export default store

// 配置异步action
import * as TYPES from '../action-types'
const delay = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, 1000)
  })
}
const voteAction = {
  // redux-thunk写法
  // sup() {
  //   return async dispatch => {
  //     await delay()
  //     dispatch({ type: TYPES.VOTE_SUP })
  //   }
  // },
  // redux-promise写法，与同步写法更接近
  async sup() {
    await delay()
    return { type: TYPES.VOTE_SUP }
  },
  // 普通同步写法
  opp() {
    return { type: TYPES.VOTE_OPP }
  },
}
export default voteAction