Bagaimana untuk meminta data secara tidak segerak dalam tindak balas

Cara meminta data secara tidak segerak dalam React: 1. Muat turun thunk melalui arahan "npm i redux-thunk --save npm i axios --save" 2. Perkenalkan plug-in thhunk dalam store.js ; 3. Dalam Hanya memperkenalkan middleware "redux-thunk" ke dalam actionCreator modul yang diperlukan.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimanakah React meminta data secara tidak segerak?

kaedah data permintaan tak segerak bertindak balas.

Terdapat banyak penyelesaian untuk meminta data secara tidak segerak dalam tindak balas.

1. saga (menggunakan fungsi penjana er6)

2. pemalam? Ia adalah untuk mengubah tindakan redux ini. Jika kami menghantar tindakan secara tak segerak, actionCreator hanya boleh mengembalikan objek Pemalam tak segerak membolehkan anda menghantar tindakan itu semula selepas tempoh masa, iaitu mengubah suai tindakan.

Artikel ini menggunakan thunk mungkin bukan yang terbaik, tetapi itulah yang biasa saya lakukan.

1. Muat turun

2. Perkenalkan pemalam ke store.js dan gunakannya.

3. Hantar data

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

Dalam actionCreator modul yang anda perlukan:

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;

4. Ujian kesan

Dalam actionCreator anda memerlukan Pengurang dalam modul:

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

Jumlah pengurang dalam stor:

Komponen dalam modul yang anda perlukan:

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

Pembelajaran yang disyorkan :《

tutorial video reaksi

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

》

Atas ialah kandungan terperinci Bagaimana untuk meminta data secara tidak segerak dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!