如何使用 reactjs 和 redux 获取和发送数据答案

【问题标题】：how to get and send data using reactjs and redux如何使用 reactjs 和 redux 获取和发送数据
【发布时间】：2021-01-01 03:30:06
【问题描述】：

尝试通过 redux 中的函数操作发送数据时遇到问题，我的代码在下面

import React from 'react'
import {connect} from 'react-redux'
import {RetrieveCompany} from '../../folder/action/my.actions'

interface Icampaing{
   campaing: my_data
}

// campaing IS WORKING WELL, GET ME ALL MY DATA
const Personal: React.FC<Icampaing> = ({campaing}, props: nay) => {
    React.useEffect(()=>{
        let pf_id: any = campaing.profile ? campaing.profile.id : 0
        let pc_id: any = campaing.profile_ca

        // THE PROBLEM IS HERE SHOW ME THE ERROR
        // TypeError: props.RetrieveCompany is not a function
        props.RetrieveCompany(pf_id, pc_id)

    },[campaing])
     return(<>
         {campaing.all_data} // HERE WHEN LOAD DATA campaing WORKING WELL
     </>)

}
const mapStateToProps = (state: any) =>({
   campaing: state.campaing
})
const mapActionToProps = {
  RetrieveCompany
}
export default connect(mapStateToProps, mapActionToProps)(Personal)

请帮帮我，我想忘了什么。

最好的话，新年快乐.....！

【问题讨论】：

Idk redux 非常好，但不应该是= ({campaing, RetrieveCompany}) => 然后使用它你会做RetrieveCompany(pf_id, pc_id)？

标签： reactjs typescript redux react-redux

【解决方案1】：

您应该使用mapDispatchToProps 而不是mapActionToProps

const mapDispatchToProps = (dispatch) => ({
  RetrieveCompany: () => dispatch(RetrieveCompany())
  // Important: this could be just 
  // RetrieveCompany depends on how you define your action.
  // For naming, I would use camelCase
});

因为您需要在这里执行一个操作，以便商店更新其状态。然后你会读取mapStateToProps返回的数据。

【讨论】：

你好越南，谢谢你的回答，但是有一个错误，像这样 const mapDispatchToProps = (dispatch) => ({ RetrieveCompany: () => dispatch(RetrieveCompany()) // 预期 2 ARGUMENTS, BUT GOT 0 });，请帮帮我，我通过了 2 arg，就像这个 dispatch(RetrieveCompany(pf_id, pc_id))，错误告诉我是“找不到名字 pf_id, pc_id, ca”，请帮帮我.

【解决方案2】：

我认为RetrieveCompany 不是真正的道具。如果您不想明确命名，请尝试传播其余的道具：

interface Icampaing {
   campaing: my_data
   [propName: string]: any
}

const Personal: React.FC<Icampaing> = ({ campaing, ...props }) => {

...

或者简单地添加它，因为无论如何你都在组件中使用它：

interface Icampaing {
   campaing: my_data
   RetrieveCompany: (pf_id: number, pc_id: number) => void
}

const Personal: React.FC<Icampaing> = ({ campaing, RetrieveCompany }) => {

【讨论】：

你好 gazdagergo，感谢您的回答，无限循环中的 2 个答案有错误，并禁用我的数据campaing，我的函数 RetrieveCompany 使用 pf_id、pc_id 获取数据，这两个变量作为数字.请帮帮我
好的，我已将它们的类型更改为数字。这有帮助吗？