3） redux-thunk处理异步操作

原创已于 2022-09-07 20:13:53 修改 · 772 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-09-07 17:35:47 首次发布

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Redux中使用redux-thunk中间件处理异步操作，通过示例展示了store配置、action创建以及如何在React组件中调用异步方法。同时，还讲解了如何安装和集成redux-devtools扩展来辅助开发。

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

react-redux封装redux： react-redux抽离redux_FF_XM的博客-优快云博客

为什么用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
重启项目后，即可成功