React发ajax请求拿数据的五个步骤(绝对实用)

一 .在需要数据的组件里用useEffect和dispatch调用请求

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getChannels } from '@/store/actions/channel'   //没有这个组件稍后会创


  const dispatch = useDispatch()    //写在函数组件里

//获取数据
  useEffect(() => {
    dispatch(getChannels())      //写在函数组件里
  }, [])                         

getChannels  这个函数会在之后的操作中会完善

二.在发请求之前先取个名字

export const SET_CHANNEL = 'channel/setChannel'

取名字的操作统一在actionTypes这个组件中进行，方便后边的管理于优化

三.在action里封装getChannels函数

import request from '@/utils/request'
import { SET_CHANNEL } from '../actionTypes'    
export function getChannels () {
  return async (dispatch) => {
    // 1.发ajax请求
    const res = await request({
      url: '/channels',
      method: 'GET'
    })
    console.log(res, 999)
    // 2.保存到redux
    dispatch({
      type: SET_CHANNEL,
      payload: res.data.channels
    })
  }
}

四.将数据保存到redux里

一样   封装一个组件

import { SET_CHANNEL } from '@/store/actionTypes'   

const initState = [] // 初始值

export default function channel (state = initState, { type, payload }) {
  console.log(type, payload)
  if (type === SET_CHANNEL) {
    return payload
  }
  return state
}

五.在需要数据的组件里用useSelect接受数据并使用

import { useDispatch, useSelector } from 'react-redux'



//以下两部操作都在函数组件中使用
  const channelList = useSelector((state) => state.channel)

   <Select placeholder="请选择频道" style={{ width: 200 }}>
        {channelList.map((item) => (
           <Option value={item.id} key={item.id}>
             {item.name}
           </Option>
        ))}
    </Select>

有了这篇博客，还怕忘记在React里怎么发请求拿数据？

麻烦三连一下，以后更新更多使用干货