redux-thunk使用

最新推荐文章于 2025-05-30 10:22:02 发布

原创最新推荐文章于 2025-05-30 10:22:02 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

26 篇文章

订阅专栏

本文深入讲解了Redux Thunk的概念及应用。Thunk是在Redux中用于处理异步操作的一种方式，通过dispatch函数实现异步调用。文章详细介绍了如何安装并配置redux-thunk中间件，以及如何在React项目中使用它来创建异步action。通过示例展示了如何定义异步函数获取数据，并将其转换为Redux action。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是thunk?

被 dispatch 的 function 会接收 dispatch 作为参数，并且可以异步调用它。这类的 function 就称为 thunk

安装redux-thunk

npm install redux-thunk --save

在react运用

import {counter} from './redux/index.redux'
import {createStore,applyMiddleware,compose}from 'redux'
import thunk from 'redux-thunk'

const store=createStore(counter,compose(
    applyMiddleware(thunk)
));

**:compose 作用是从右到左来组合多个函数，在这里我们可以引入 devTools

一个异步函数获取数据:

export function getUserData(){
    return dispatch=>{
        axios.get('/data')
           .then((res)=>{
            if(res.status===200){
                dispatch(userData(res.data))
             }
        })
    }
}

export function userData(data){
    return{
        type:USER_DATA,
        payload:data
    }
}