useReducer接收异步请求的数据

甜不吃盐

于 2021-07-23 15:58:53 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/m0_60353695/article/details/119037504

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在React应用中使用Redux和axios进行数据获取，并通过reducer处理网络响应，实现实时更新页面数据。详细展示了初始化状态、useReducer、 useEffect hook的交互过程。

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

const init = { dataList:[] };//初始化dataState

const [state,dispatch] = useReducer(reducer,init);

useEffect(() => {
    //发送网络请求
    axios.get("/user?ID=123").then(res => {
        dispatch({
            type:ACTION_TYPE.GETDATA,
            payload: //后端返回的数据
        })
    })
},[]);

//使用 state.dataList 渲染页面

在reducer页面

function reducer(state,action){
    switch(action.type){
        case "getData":
            return { //根据需求对数据做出操作，这里将返回的数据与初始化的数据合并
                ...state,
                dataList:action.payload 
            };
}    

export default reducer;