react redux获取异步数据

最新推荐文章于 2024-08-22 15:27:02 发布

weixin_45134477

最新推荐文章于 2024-08-22 15:27:02 发布

阅读量437

点赞数

文章标签： reactjs 前端

本文链接：https://blog.csdn.net/weixin_45134477/article/details/104485709

版权

本文介绍了如何在React Redux应用中使用redux-thunk插件来获取异步数据。通过下载并配置redux-thunk，然后在store.js中编写axios请求方法，将数据注入仓库，最终实现数据的渲染。虽然样式朴素，但成功展示了异步数据加载的效果。

摘要由CSDN通过智能技术生成

我自己使用json-server 模拟的数据

1.首先下载获取异步数据插件

redux-thunk npm i redux-thunk

src下的仓库store下的store.js 的代码

import {createStore,applyMiddleware} from "redux"
import reducer from "./reducer"
import thunk from "redux-thunk"

var store = createStore(reducer,applyMiddleware(thunk))
export default store

一定得引入 thunk

然后写入获取异步数据的方法

import axios from "axios"
export default{
    getData(){
        return (dispatch)=>{
            axios({
                method:"get",
                url:"http://localhost:4000/cart"
            }).then(res=>{
                dispatch({
                    type:"GETDATA",
                    cart:res.data
                })
            })
        }
    }
}

这里我用了axios请求数据 axio需要自行下载 npm install axios --save

仓库再接受这个方法