React で非同期にデータをリクエストする方法

React リクエスト データの非同期メソッド: 1. 「npm i redux-thunk --save npm i axios --save」コマンドを使用してサンクをダウンロードします。 2. サンク プラグインを store.js に導入します。 3. . 必要なモジュールのactionCreatorにミドルウェア「redux-thunk」を導入するだけです。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react リクエスト データを非同期的に行うにはどうすればよいですか?

非同期リクエスト データ メソッドに反応します。

非同期リクエスト データに反応するためのソリューションは多数あります。

1、saga (er6 ジェネレーター関数を使用)

2、promise

3、thunk

4、…

なぜ使用するのかプラグイン？このreduxアクションを変革することです。アクションを非同期に送信すると、actionCreator はオブジェクトを返すことしかできませんが、非同期プラグインを使用すると、一定期間後にアクションを再度送信して、アクションを変更できます。

この記事ではサンクを使用しています。最良ではないかもしれませんが、私はこれに慣れています。

1. ダウンロード

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

2. 引用。プラグインをstore.jsに導入して利用します。

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. データの送信

必要なモジュールの actionCreator 内:

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

モジュールのリデューサー内で、必要なもの:

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

ストア内の合計リデューサー:

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

必要なモジュール内のコンポーネント:

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

推奨される学習: 「react ビデオ チュートリアル##」 #》

以上がReact で非同期にデータをリクエストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。