美文网首页
Redux中发送异步请求获取数据

Redux中发送异步请求获取数据

作者: 泡杯感冒灵 | 来源:发表于2022-03-20 15:31 被阅读0次
步骤
  1. 首先,引入axios,在生命周期函数componentDidMount中发送请求。
  2. 获取到数据后,通过store.dispatch派发一个action给store,store拿到这个action连同原先的数据,一起发给reducer。
  3. reducer里,深拷贝store传来的数据,然后改变拷贝对象的数据,再把这个拷贝对象返回给store
  4. store拿到这个拷贝对象,替换原来的数据
  5. 组件通过store.subscribe方法订阅了store的变化,这个时候执行传给subscribe的函数,通过setState更新组件的state。
import axios from 'axios';

componentDidMount(){
      axios.get('/list.json').then((res)=>{
            const data = res.data;
            const action = initListAction(data);
            store.dispatch(action);
      })
 }

// actionCreators.js
export  const initListAction = (data) => ({
    type: INIT_LIST_ACTION,
    data
})

//  reducer.js
if(action.type === INIT_LIST_ACTION){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list = action.data;
        return newState;
 }

相关文章

  • Redux 中发送异步请求获取数据

  • Redux中发送异步请求获取数据

    步骤 首先,引入axios,在生命周期函数componentDidMount中发送请求。 获取到数据后,通过sto...

  • vue中用async/await 来处理异步

    用async/ await来发送异步请求,从服务端获取数据,等待获取数据,然后处理数据。 resolve,reje...

  • 08_Ajax&Json

    异步请求 无刷新获取服务器资源。特点: js发送异步请求,服务器响应返回的数据给到js,js操作dom更新页面 无...

  • React解惑之 redux-saga

    Redux-saga 概述 redux-saga和redux-thunk一样,是用于处理redux应用异步请求的中...

  • 爬虫的概念

    爬虫是模拟浏览器发送请求,获取响应 爬虫的流程 url--->发送请求,获取响应--->提取数据---》保存数据 ...

  • 9.数据的异步ajax

    前言 这节我们将实现数据的异步获取,主要用到了: redux-async-connect:数据异步取,并将状态放入...

  • redux 异步action

    redux 异步action yarn add redux-thunk 参考 Redux Thunk api请求demo

  • redux-saga

    redux-saga 一个用于管理Redux应用异步操作的中间件,使副作用(数据获取、浏览器缓存获取)易于管理、运...

  • 同步请求&异步请求

    同步:发送http请求→获取返回结果→分析结果→跳转下一页(主UI线程卡死,等待返回结果) 异步:发送http请求...

网友评论

      本文标题:Redux中发送异步请求获取数据

      本文链接:https://www.haomeiwen.com/subject/exhndrtx.html