3） redux-thunk处理异步操作

 redux基本概念：redux初体验（问题记录）_FF_XM的博客-CSDN博客

react-redux封装redux： react-redux抽离redux_FF_XM的博客-CSDN博客

为什么用redux-thunk？

redux无法进行异步操作，需要借助中间件（redux-thunk）来完成异步。

下载包 npm install --save  redux-thunk

接上篇react-redux的使用

// 引入应用中间件函数applyMiddleware
import { configureStore, applyMiddleware } from '@reduxjs/toolkit'
import thunk from "redux-thunk";

import { counter } from './reducers'

// 根据counter函数创建store对象
const store = configureStore(
  { reducer: counter },
  // 异步处理中间件
  applyMiddleware(thunk)
)

export default store

// action.js
import { INCREMENT, DECREMENT } from "./action-types";
export const increment = (number) => ({ type: INCREMENT, data: number })
export const decrement = (number) => ({ type: DECREMENT, data: number })
// 新增异步方法
export const incrementAsync = (number) => {
  return dispatchEvent => (
    setTimeout(() => {
      dispatchEvent(increment(number))
    }, 1000)
  )
}

// app.js
import { connect } from "react-redux";
// 引入action内的方法
import { increment, decrement, incrementAsync } from "../redux/actions";
// 引入容器组件
import counter from "../components/counter";

export default connect(
  (state) => {
    // 将state状态传给counter组件
    return { count: state };
  },
  // 将异步方法incrementAsync传给counter组件
  { increment, decrement, incrementAsync }
)(counter);

 counter组件内引入异步方法

完工~

redux-devtool插件使用

插件链接：百度网盘 请输入提取码 提取码：kdmc

拖入谷歌扩展程序内

下载工具依赖包

npm install --save-dev redux-devtools-extension

// store.js
import { configureStore, applyMiddleware } from '@reduxjs/toolkit'
import thunk from "redux-thunk";
// redux-devtool引入插件
import { composeWithDevTools } from "redux-devtools-extension";

import { counter } from './reducers'

// 根据counter函数创建store对象
const store = configureStore(
  { reducer: counter },
  // 处理中间件
  composeWithDevTools(applyMiddleware(thunk))
)

export default store

重启项目后，即可成功