Comment demander des données de manière asynchrone en réaction

Comment demander des données de manière asynchrone dans React : 1. Téléchargez thunk via la commande "npm i redux-thunk --save npm i axios --save" 2. Introduisez le plug-in thunk dans store.js ; l'actionCreator qui nécessite le module Introduisez simplement le middleware "redux-thunk".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment demander des données de manière asynchrone dans React ?

Réagissez à la méthode de données de demande asynchrone.

Il existe de nombreuses solutions pour demander des données de manière asynchrone en réaction.

1. saga (en utilisant la fonction générateur er6)

2. promesse

3. thunk

4.…

Pourquoi utiliser un plug-in ? Il s'agit de transformer cette action redux. Si nous envoyons une action de manière asynchrone, actionCreator ne peut renvoyer que l'objet. Le plug-in asynchrone vous permet de renvoyer l'action après un certain temps, qui consiste à modifier l'action.

Cet article utilise thunk. Ce n'est peut-être pas le meilleur, mais c'est ce à quoi je suis habitué.

1. Téléchargez

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

2. Introduisez le plug-in dans store.js et utilisez-le.

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. Envoyer des données

Dans l'actionCréateur du module dont vous avez besoin :

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. Test d'effet

Le réducteur dans le module dont vous avez besoin :

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
    }
}

Les réducteurs totaux dans le magasin :

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

En vous Composants dans les modules requis :

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);

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!