반응에서 비동기식으로 데이터를 요청하는 방법

React에서 비동기적으로 데이터를 요청하는 방법: 1. "npm i redux-thunk --save npm i axios --save" 명령을 통해 썽크를 다운로드합니다. 2. store.js에 썽크 플러그인을 도입합니다. 모듈이 필요한 actionCreator 미들웨어 "redux-thunk"만 소개하면 됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React에서 비동기적으로 데이터를 요청하는 방법은 무엇입니까?

반응 비동기 요청 데이터 방식.

반응으로 데이터를 비동기식으로 요청하는 솔루션이 많이 있습니다.

1. saga (er6 생성기 기능 사용)

2. promise

3.thunk

4.…

플러그인을 사용하는 이유는 무엇인가요? 이 redux 동작을 변형하는 것입니다. 작업을 비동기식으로 보내는 경우 actionCreator는 개체만 반환할 수 있습니다. 비동기식 플러그인을 사용하면 일정 시간이 지난 후 작업을 다시 보낼 수 있습니다. 즉, 작업을 수정할 수 있습니다.

이 글에서는 thunk를 사용하고 있습니다. 최고는 아닐 수도 있지만 저는 익숙합니다.

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. 효과 테스트

필요한 모듈의 감속기:

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;

In you 필수 모듈의 구성요소:

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 비디오 튜토리얼"

위 내용은 반응에서 비동기식으로 데이터를 요청하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!