Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk meminta data secara tidak segerak dalam tindak balas

Bagaimana untuk meminta data secara tidak segerak dalam tindak balas

藏色散人
Lepaskan: 2022-12-28 09:40:39
asal
1977 orang telah melayarinya

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.

Bagaimana untuk meminta data secara tidak segerak dalam tindak balas

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
Salin selepas log masuk
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;
Salin selepas log masuk
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
                    })
                })
        }
    }
}
Salin selepas log masuk
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
    }
}
Salin selepas log masuk

Pembelajaran yang disyorkan :《

tutorial video reaksi
import {combineReducers} from 'redux'
import {listReducer} from '../components/list/reducer'
 var reducer = combineReducers({
     list:listReducer
 })
 export default reducer;
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan