如何调用多个API并将其传递给“一个API”，而在react redux的action.js上仅调用“oneApi”？

xzlaal3s  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(148)

我的还原版有些问题我尝试在这一个API中调用不同的API，并且只在controller.js上调用了这一个API。
问题是这样的：我有一个实际种植的API，但是实际种植中的数据与User和State API相关，之前我尝试直接在controller.js上调用不同的API，但是出现了一个错误，当我删除状态数据或用户数据时，实际种植的view.js将不会显示在浏览器上。
该API使用Loopback 4框架制作，该框架是REST API，包含get、post、put和delete。
因此我需要调用所有的API在redux端是在action.js.我的朋友告诉我调用的对象和传递它。但我没有找到任何解决方案，有人能帮助我吗？
下面是实际种植操作. js

import ACTION, { ACTUALPLANTING_STATE } from './creator'

import {getActualPlantingApi,updateActualPlantingApi,addActualPlantingApi,deleteActualPlantingApi} from '../../../datasources/rest/endpoints/actual_planting'

//import other API
import {getStatesApi,updateStatesApi,addStatesApi,deleteStatesApi}from '../../../datasources/rest/endpoints/states'
import {getUsersApi,updateUsersApi,addUsersApi,deleteUsersApi}from '../../../datasources/rest/endpoints/users'

//get actual Planting - calling API
export const getActualPlanting = () => async (dispatch) => {
  try {
    let act_planting_data = await getActualPlantingApi()

    // let actualPlantingGetObj = {
      // id : actual_planting.data
      // state_name :
      // location_site :
      // date :
      // name :
      // phoneNumber :
      // email :
      // no_of_seedling :
      // status :
    // }

    //let actData = await getActualPlantingApi()

    dispatch({
      type: ACTION.ACTUALPLANTING.SUCCESS,
      payload: {
        status: ACTUALPLANTING_STATE.SUCCESS,
        payload: { actualPlanting: act_planting_data.data, status: ACTUALPLANTING_STATE.SUCCESS, message: 'Actual Planting Retrieved' }
      }
    })
  } catch (e) {
    return dispatch({
      type: ACTION.ACTUALPLANTING.FAILURE,
      payload: { actualPlanting: {}, status: ACTUALPLANTING_STATE.ERROR, message: e },
    })
  }
}

//update actual Planting - API
export const updateActualPlanting = (actualPlantingUpdate) => async (dispatch) => {
  let response;

  try {
    response = await updateActualPlantingApi(
      actualPlantingUpdate
    )

  } catch (e) {
    return dispatch({
      type: ACTION.ACTUALPLANTING.FAILURE,
      actualPlanting: { credential: {}, status: ACTUALPLANTING_STATE.ERROR, message: e },
    })
  }

  dispatch({
    type: ACTION.ACTUALPLANTING.PENDING,
    payload: {
      status: ACTUALPLANTING_STATE.IN_PROGRESS,
      message: '',
    }
  })

  if (response.status === 204) {
    try {
      let act_planting_data = await getActualPlantingApi()
 
      console.log("ACTIONS:", act_planting_data)
      dispatch({
        type: ACTION.ACTUALPLANTING.SUCCESS,
        payload: {
          status: ACTUALPLANTING_STATE.SUCCESS,
          payload: { actualPlanting: act_planting_data.data, status: ACTUALPLANTING_STATE.SUCCESS, message: 'Actual Planting Retrieved' }
        }
      })
    } catch (e) {
      return dispatch({
        type: ACTION.ACTUALPLANTING.FAILURE,
        payload: { actualPlanting: {}, status: ACTUALPLANTING_STATE.ERROR, message: e },
      })
    }
  } else {
    return dispatch({
      type: ACTION.ACTUALPLANTING.FAILURE,
      payload: { actualPlanting: {}, status: ACTUALPLANTING_STATE.ERROR, message: 'Failed to update' },
    })
  }
}

// Adding Actual Planting - API
export const addActualPlanting = (actualPlantingAdd) => async (dispatch) => {
  let response;

  try {
    response = await addActualPlantingApi(
      actualPlantingAdd
    )

  } catch (e) {
    return dispatch({
      type: ACTION.ACTUALPLANTING.FAILURE,
      actualPlanting: { credential: {}, status: ACTUALPLANTING_STATE.ERROR, message: e },
    })
  }

  dispatch({
    type: ACTION.ACTUALPLANTING.PENDING,
    payload: {
      status: ACTUALPLANTING_STATE.IN_PROGRESS,
      message: '',
    }
  })

  if (response.status === 200) {
    try {
      let act_planting_data = await getActualPlantingApi()
      console.log("ACTIONS:", act_planting_data)
      dispatch({
        type: ACTION.ACTUALPLANTING.SUCCESS,
        payload: {
          status: ACTUALPLANTING_STATE.SUCCESS,
          payload: { actualPlanting: act_planting_data.data, status: ACTUALPLANTING_STATE.SUCCESS, message: 'Actual Planting Retrieved' }
        }
      })
    } catch (e) {
      return dispatch({
        type: ACTION.ACTUALPLANTING.FAILURE,
        payload: { actualPlanting: {}, status: ACTUALPLANTING_STATE.ERROR, message: e },
      })
    }
  } else {
    return dispatch({
      type: ACTION.ACTUALPLANTING.FAILURE,
      payload: { actualPlanting: {}, status: ACTUALPLANTING_STATE.ERROR, message: 'Failed to add' },
    })
  }
}

// Delete actual planting 
export const deleteActualPlanting = (actualPlantingDelete) => async (dispatch) => {
  let response;

  try {
    response = await deleteActualPlantingApi(
      actualPlantingDelete
    )

  } catch (e) {
    return dispatch({
      type: ACTION.ACTUALPLANTING.FAILURE,
      actualPlanting: { credential: {}, status: ACTUALPLANTING_STATE.ERROR, message: e },
    })
  }

  dispatch({
    type: ACTION.ACTUALPLANTING.PENDING,
    payload: {
      status: ACTUALPLANTING_STATE.IN_PROGRESS,
      message: '',
    }
  })

  if (response.status === 204) {
    try {
      let act_planting_data = await getActualPlantingApi()
      console.log("ACTIONS:", act_planting_data)
      
      dispatch({
        type: ACTION.ACTUALPLANTING.SUCCESS,
        payload: {
          status: ACTUALPLANTING_STATE.SUCCESS,
          payload: { actualPlanting: act_planting_data.data, status: ACTUALPLANTING_STATE.SUCCESS, message: 'Actual Planting Retrieved' }
        }
      })
    } catch (e) {
      return dispatch({
        type: ACTION.ACTUALPLANTING.FAILURE,
        payload: { actualPlanting: {}, status: ACTUALPLANTING_STATE.ERROR, message: e },
      })
    }
  } else {
    return dispatch({
      type: ACTION.ACTUALPLANTING.FAILURE,
      payload: { actualPlanting: {}, status: ACTUALPLANTING_STATE.ERROR, message: 'Failed to delete' },
    })
  }
}

const ActualPlantingAction = {
  getActualPlanting,
  updateActualPlanting,
  addActualPlanting,
  deleteActualPlanting
}

export default ActualPlantingAction

下面是实际的PlantingC.js（与redux部分连接的控制器）

import React from 'react'
import ActualPlantingV from './actualPlantingV'
import { useState,useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import PropTypes, { any, array } from 'prop-types'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import {  useJsApiLoader, Marker } from '@react-google-maps/api';
import { Loading } from '../../../../components/drawable/loading'

import { getActualPlanting, updateActualPlanting,addActualPlanting,deleteActualPlanting } from '../../../../modules/repositories/home/actual_planting/actions'
import { ACTUALPLANTING_STATE } from '../../../../modules/repositories/home/actual_planting/creator'
import { getStates } from 'src/modules/repositories/home/states/actions'
import { STATES_STATE } from '../../../../modules/repositories/home/states/creator'
import { getUsers } from 'src/modules/repositories/home/users/actions'
import { USERS_STATE } from 'src/modules/repositories/home/users/creator'
import { getSpecies } from 'src/modules/repositories/home/species/actions'
import { SPECIES_STATE } from 'src/modules/repositories/home/species/creator'

const ActualPlantingC = (props) => {
  const {  getSpecies,dataLoad4,dataStatus4,getActualPlanting, updateActualPlanting,addActualPlanting,deleteActualPlanting ,dataStatus, dataLoad,dataStatus2, dataLoad2,getStates,getUsers,dataLoad3,dataStatus3} = props
  const navigate = useNavigate()
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)

  //map
  const containerStyle = {
    width: '100%',
    height: '100%'
  };

  const center = {
    lat: 1.563467,
    lng: 103.613234
  };
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'AIzaSyASyYRBZmULmrmw_P9kgr7_266OhFNinPA'
  })

  const [map, setMap] = React.useState(null)
  const onLoad=(map)=>{
    setMap(map)
  }

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null)
  }, [])

  const [zoom, setZoom] = useState(6)

  const [coordinates, setCoordinates] = useState(center)
  const [visible3, setVisible3] = useState(false)

  const onBtnClick = (loc,item) => {

    setZoom(10)
    setCoordinates(loc)
    setState(item.state_name)
    setLocation(item.location_site)
    const t=tableData2.filter(obj=>obj.state_name===item.state_name)
    const tb=[]
    for(var i=0;i<t.length;i++){
      tb.push(t[i].location_site)
    }
    setArr(tb)
  }
  const handleSmaller=()=>{
    if(zoom>=7){
      setZoom(zoom-1)
    }
  }
  const [hidden,setHidden]=useState(true)
  const handleZoom=()=>{
    if(map!==null){
      setZoom(map.zoom)
    }
  }

  const columns = [
    { key: 'state_name',label:'State', _style: { width: '10%', backgroundColor: 'darkBlue', color: 'white' },_props: { color: 'primary', className: 'fw-semibold' }},
    { key: 'location_site',label:'Location', _style: { width: '10%', backgroundColor: 'darkBlue', color: 'white' },_props: { color: 'primary', className: 'fw-semibold' } },
    { key: 'date',label:'Date of Planting', _style: { width: '10%', backgroundColor: 'darkBlue', color: 'white' },_props: { color: 'primary', className: 'fw-semibold' } },
    { key: 'name',label:'Officer Name', _style: { width: '10%', backgroundColor: 'darkBlue', color: 'white' },_props: { color: 'primary', className: 'fw-semibold' } },
    { key: 'phoneNumber',label:'Contact No', _style: { width: '10%', backgroundColor: 'darkBlue', color: 'white' } ,_props: { color: 'primary', className: 'fw-semibold' }},
    { key: 'email', _style: { width: '15%', backgroundColor: 'darkBlue', color: 'white' },_props: { color: 'primary', className: 'fw-semibold' } },
    { key: 'no_of_seedling',label:'No of Planting', _style: { width: '5%', backgroundColor: 'darkBlue', color: 'white' } ,_props: { color: 'primary', className: 'fw-semibold' }},
    { key: 'status',label:'Status of Planting', _style: { width: '5%', backgroundColor: 'darkBlue', color: 'white' },_props: { color: 'primary', className: 'fw-semibold' } },
    {
      key: 'show_details',
      label: '',
      _style: { width: '10%', backgroundColor: 'darkBlue', color: 'white' },
      _props: { color: 'primary', className: 'fw-semibold' },
      filter: false,
      sorter: false,
    },
  ]

  useEffect(() => {
    if (dataStatus === ACTUALPLANTING_STATE.PENDING) {
      getActualPlanting()
    }
    if (dataStatus2 === STATES_STATE.PENDING) {
      getStates()
    }
    if (dataStatus3 === USERS_STATE.PENDING) {
      getUsers()
    }
    if (dataStatus4 === SPECIES_STATE.PENDING) {
      getSpecies()
    }
  }, [dataStatus, getActualPlanting,dataStatus2, getStates,dataStatus3,getUsers,dataStatus4,getSpecies])



  const [State, setState] = useState('')
  const [location, setLocation] = useState("")
  const [dateOfPlanting, setDateOfPlanting] = useState(new Date())
  const [nameOfFieldOfficer, setNameOfFieldOfficer] = useState("")
  const [phoneNumber, setContact] = useState("")
  const [email, setEmail] = useState("")
  const [noOfPlanting, setNoOfPlanting] = useState()
  const [statusOfPlanting, setStatusOfPlanting] = useState("")
  const [checkingFeedback,setCheckingFeedback]=useState('')
  const [color1,setColor1]=useState('')
  const [color2,setColor2]=useState('')
  // const handleClick = (tableData2,tableData3) => {
  //   var d=new Date(dateOfPlanting)
  //   if(!isNaN(noOfPlanting)&&State!==''&&tableData2.findIndex(item => (item.state_name === State&&item.location_site===location))!==-1){
  //     setVisible2(true)
  //     let actPlanting = {
  //       date: d,
  //       no_of_seedling: parseInt(noOfPlanting),
  //       status: statusOfPlanting,
  //       id_state:tableData2[tableData2.findIndex(item => (item.state_name === State&&item.location_site===location))].id,
  //       id_pic:tableData3[tableData3.findIndex(item => (item.email === email))].id,
  //     }
  //     addActualPlanting(actPlanting)
  //     setVisible(false)
  //     setState("")
  //     setLocation("")
  //     setDateOfPlanting("")
  //     setNameOfFieldOfficer("")
  //     setContact("")
  //     setEmail("")
  //     setNoOfPlanting("")
  //     setStatusOfPlanting("")
  // }
  // else if(tableData2.findIndex(item => (item.state_name === State&&item.location_site===location))===-1&&!isNaN(noOfPlanting)&&State!==''){
  //   setCheckingFeedback('The state or location do not exist')
  //   setColor2('')
  //   setColor1('')
  // }
  // else if(!isNaN(noOfPlanting)&&State===''&&tableData2.findIndex(item => (item.state_name === State&&item.location_site===location))!==-1){
  //   setCheckingFeedback('State cannot be null')
  //   setColor2('red')
  //   setColor1('')
  // }
  // else if(isNaN(noOfPlanting)&&State!==''&&tableData2.findIndex(item => (item.state_name === State&&item.location_site===location))!==-1){
  //   setCheckingFeedback('No. of seedling must be number')
  //   setColor1('red')
  //   setColor2('')
  // }
  // else{
  //   setCheckingFeedback('No. of seedling must be number and State cannot be null')
  //   setColor1('red')
  //   setColor2('red')
  // }
  // }

  let tableData2
  const stateDataArr = []
  const locationDataArr=[]
  if(dataLoad2!==null&&dataLoad2!==undefined){
    tableData2=dataLoad2.states
    for (let i = 0; i < tableData2.length; i++) {
      stateDataArr.push(tableData2[i].state_name)
    }
    for (let i = 0; i < tableData2.length; i++) {
      locationDataArr.push(tableData2[i].location_site)
    }
  }

  const uniqueState = [...new Set(stateDataArr)]
  const uniqueLocation = [...new Set(locationDataArr)]


  const [arr,setArr]=useState(uniqueLocation)

  const [validated,setValidated]=useState(false)
  const onSubmit=(e,tableData2,tableData3)=>{
    const form = e.currentTarget
    if (form.checkValidity() === false) {
      e.preventDefault()
      e.stopPropagation()
    }
    else{
      setVisible2(true)
      var d =new Date(dateOfPlanting)
      let actPlanting = {
      // "date": "2023-01-17T06:33:54.479Z",
      // "status": "stringzzzz",
      // "id_state": 4,
      // "id_pic": 4
        date: d,
        no_of_seedling: parseInt(noOfPlanting),
        status: statusOfPlanting,
        id_state: tableData2[tableData2.findIndex(item => (item.state_name === State&&item.location_site===location))].id,
        id_pic: tableData3[tableData3.findIndex(item => (item.email === email&&item.name === nameOfFieldOfficer&&item.phoneNumber === phoneNumber))].id,        
      }
      addActualPlanting(actPlanting)
      setVisible(false)
      setState("")
      setLocation("")
      setDateOfPlanting("")
      setNameOfFieldOfficer("")
      setContact("")
      setEmail("")
      setNoOfPlanting("")
      setStatusOfPlanting("")
    }
    setValidated(true)
  }

  const onChange=(e,tableData2)=>{
    setState(e.target.value)
    const t=tableData2.filter(obj=>obj.state_name===e.target.value)
    const tb=[]
    for(var i=0;i<t.length;i++){
      tb.push(t[i].location_site)
    }
    setArr(tb)
  }

  if (dataStatus === ACTUALPLANTING_STATE.SUCCESS && dataStatus2 === STATES_STATE.SUCCESS && dataStatus3===USERS_STATE.SUCCESS&&dataStatus4===SPECIES_STATE.SUCCESS){
    return(
      <ActualPlantingV
    state={{
      tableData: dataLoad.actualPlanting,
      tableData2:dataLoad2.states,
      tableData3:dataLoad3.users,
      tableData4:dataLoad4.species,
      columns: columns,
      navigate: navigate,
      visible: visible,
      checkingFeedback:checkingFeedback,
      color1:color1,
      color2:color2,
      uniqueState:uniqueState,
      arr:arr,
      visible2:visible2,
      containerStyle:containerStyle,
      isLoaded:isLoaded,
      coordinates:coordinates,
      zoom:zoom,
      State:State,
      location:location,
      validated:validated,
      email:email,
      nameOfFieldOfficer:nameOfFieldOfficer
    }}
    callback={{
      setVisible: setVisible,
      // handleClick: handleClick,
      setState: setState,
      setLocation: setLocation,
      setDateOfPlanting: setDateOfPlanting,
      setNameOfFieldOfficer: setNameOfFieldOfficer,
      setContact: setContact,
      setEmail: setEmail,
      setNoOfPlanting: setNoOfPlanting,
      setStatusOfPlanting: setStatusOfPlanting,
      deleteActualPlanting:deleteActualPlanting,
      setCheckingFeedback:setCheckingFeedback,
      setColor1:setColor1,
      setColor2:setColor2,
      onChange:onChange,
      onUnmount:onUnmount,
      onBtnClick:onBtnClick,
      handleSmaller:handleSmaller,
      handleZoom:handleZoom,
      onLoad:onLoad,
      onSubmit:onSubmit,
      }} />
    )
  }
  return <Loading/>

}

// function mapStateToProps(state) {
//   return {
//     dataplan: state.dataplan,
//     site: state.site,
//   }
// }

const actionToPropMap = (dispatch) => {
  return bindActionCreators(
    {
      getActualPlanting,
      updateActualPlanting,
      addActualPlanting,
      deleteActualPlanting,
      getStates,
      getUsers,
      getSpecies
    },
    dispatch,
  )
}

const stateToPropMap = (state) => ({
  dataLoad: state.actualPlanting.payload,
  dataStatus: state.actualPlanting.status,
  error: state.actualPlanting.message,
  dataLoad2: state.states.payload,
  dataStatus2: state.states.status,
  error2: state.states.message,
  dataLoad3: state.users.payload,
  dataStatus3: state.users.status,
  error3: state.users.message,
  dataLoad4: state.species.payload,
  dataStatus4: state.species.status,
  error4: state.species.message,
})

ActualPlantingC.propTypes = {
  dataStatus: PropTypes.string,
  dataLoad: PropTypes.object,
  getActualPlanting: PropTypes.func,
  updateActualPlanting: PropTypes.func,
  addActualPlanting:PropTypes.func,
  deleteActualPlanting:PropTypes.func,
  dataStatus2: PropTypes.string,
  dataLoad2: PropTypes.object,
  getStates: PropTypes.func,
  getUsers:PropTypes.func,
  dataStatus3: PropTypes.string,
  dataLoad3: PropTypes.object,
  getSpecies:PropTypes.func,
  dataStatus4: PropTypes.string,
  dataLoad4: PropTypes.object,

}

export default connect(stateToPropMap, actionToPropMap)(ActualPlantingC)
redux

1条答案

按热度按时间
nkcskrwz

nkcskrwz1#

虽然这不是你问题的直接答案：
你应该知道你正在写一个 * 非常 * 过时风格的Redux代码。“现代Redux”与我们的官方Redux工具包将消除80%的你刚刚写的东西，并 * 更 * 容易阅读和维护。createSlice自动生成操作创建器和简化简化器，createAsyncThunk将自动调度基于异步请求的操作。甚至比这更好，“RTK Query”createApi方法将完全为您完成所有获取和缓存工作，从而消除编写 * 任何 * 这些内容的需要。
有关如何使用Redux Toolkit的详细信息，请参阅我们的Redux文档：

赞(0）分享  回复(0）举报  2023-01-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com