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

最新推荐文章于 2021-09-23 18:04:06 发布

原创最新推荐文章于 2021-09-23 18:04:06 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用 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);
        })
    }
}