How to request data asynchronously in react

React request data asynchronous method: 1. Download thunk through the "npm i redux-thunk --save npm i axios --save" command; 2. Introduce the thunk plug-in into store.js; 3. In Just introduce the middleware "redux-thunk" into the actionCreator of the required module.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How does react request data asynchronously?

react asynchronous request data method.

There are many solutions for react asynchronous request data.

1, saga (using er6 generator function)

2, promise

3, thunk

4,…

Why use plug-ins? It is to transform this redux action. If we send an action asynchronously, actionCreator can only return the object. The asynchronous plug-in allows you to send the action again after a period of time, which is to modify the action.

This article uses thunk. It may not be the best, but it is what I am used to.

1. Download

npm i redux-thunk --save
npm i axios --save

2. Quote. Introduce the plug-in into store.js and use it.

import {createStore,applyMiddleware} from 'redux'   //引入applyMiddleware
import reducers from './reducers'  //总的reducer
import thunk from 'redux-thunk'   //引入thunk 
var store = createStore(reducer,applyMiddleware(thunk));  //使用中间件
export default store;

3. Send data

In the actionCreator of the module you need:

import axios from 'axios'
export default {
    getData(){
        return (dispatch)=>{   // 引入中间件redux-thunk后，就可以延迟发出动作
                axios.get('http://www.xmyxapp.com/api/tab/1?start=0').then((res)=>{
                    console.log(res)
                    dispatch({
                        type:'GETDATA',
                        list:res.data.data.items.list
                    })
                })
        }
    }
}

4. Effect test

In the reducer of the module you need :

var initState  ={
    list:[]
}
export const listReducer = (state = initState, action) => {
    var newState ={...state};
    switch (action.type) {
        case 'GETDATA':
            newState.list = action.list  // 这个action.list就是该模块actionCreator里传过来的值
            return newState;
        default:
            return state
    }
}

The summed reducers in the store:

import {combineReducers} from 'redux'
import {listReducer} from '../components/list/reducer'
 var reducer = combineReducers({
     list:listReducer
 })
 export default reducer;

The components in the module you need:

import React, { Component } from 'react'
import {connect} from 'react-redux'
import actionCreator from './actionCreator';
 class List extends Component {
  componentDidMount(){
      this.props.getData();   // 调用异步方法获取数据
  }
  render() {
      console.log(this.props);
    return (
      <div>
        <ul>
            {
                this.props.list.list.map((item)=>{
                    return item.title?<li key={item.id}>{item.title}</li>:""
                })
            }
        </ul>
      </div>
    )
  }
}
export default connect((state)=>state,actionCreator)(List);

Recommended learning: "react video tutorial》

The above is the detailed content of How to request data asynchronously in react. For more information, please follow other related articles on the PHP Chinese website!