使用redux-thunk中间件实现ajax数据请求

本文详细介绍了如何使用 Redux-Thunk 中间件处理异步操作。从安装配置到实际应用,包括设置 Redux store,引入并应用 thunk 中间件,以及在组件中使用该中间件进行异步请求的具体步骤。

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

1.安装npm install redux-thunk

npm install redux-thunk

2.引入redux-thiunk

  

import {createStore, applyMiddleware,compose} from 'redux';
import reducer from './reducer'
import thunk from 'redux-thunk';
//浏览器有redux插件,加这句话可以进行调试  https://github.com/zalmoxisus/redux-devtools-extension
const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
    applyMiddleware(thunk),
);

const store = createStore(
    reducer,
    enhancer
);
export default store

 demo

1)使用中间件(redux-thunk)的组件

componentDidMount () {
        const action = getTodoLlist()
        store.dispatch(action)
    }

2)actionCreator.js

export const getTodoLlist = () => {
    return () => {
        axios.post('/list.json').then((res)=>{
            console.log(res)
            const data = res.data;
            const action = initListAction(data)
            store.dispatch(action);
        })
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值