带有打字稿的 mapDispatchToProps 很困难

Posted 2023-02-22

【中文标题】带有打字稿的 mapDispatchToProps 很困难

【英文标题】：mapDispatchToProps with typescript is being difficult

【发布时间】：2017-10-04 05:06:12

【问题描述】：

尝试使用 typescript 和 redux 构建一个简单的 react crud 应用程序并遇到以下问题。我有一个具有指定签名的函数，它将把一个人对象作为参数，如此处所示。

export default function savePerson(person: Person) 
    return async (dispatch: any) => 
        let newPerson = await axios.post('/api/people/addPeron', person);
        dispatch(addPersonSuccess(person));
    

现在，当我尝试将组件连接到 redux 时，mapDispatchToProps 出现问题。这是我的代码。

function mapDispatchToProps(dispatch: any) 
  const actions = 
    savePerson: () => dispatch(savePerson())
  
  return actions;

问题是 savePerson 函数需要一个人传递给它，但是我无法访问 mapDispatchToProps 中的状态，并且由于该函数缺少参数，我的代码无法编译。有什么想法吗？

使用解决方案编辑：

这是使该代码工作所需的一项更改的代码。

function mapDispatchToProps(dispatch: any) 
  const actions = 
    savePerson: (person: Person) => dispatch(savePerson(person))
  
  return actions;

我只需要将 person 对象传递给调用 dispatch 的匿名函数。

【参考方案1】：

import  AnyAction  from "redux";
import  ThunkDispatch  from "redux-thunk";
import  savePerson  from "../myActions";

// IExtraDispatchArguments usually is empty
import  IExtraDispatchArguments, IStoreState  from "../myGlobalTypes"

interface IMyComponentProps 
    savePerson: (person: Person) => Promise<void>;

class MyComponent extends React.Component<IMyComponentProps, void>
    someMethod(person: Person) 
        this.actions.savePerson(person);
    


const WrappedComponent = connect(
   (state: IStoreState, ownProps: ) => (
       // here you can map state
   ),
   (dispatch: (dispatch: ThunkDispatch<IStoreState, IExtraDispatchArguments, AnyAction>)) => (
      // savePerson: (person: Person) => dispatch(savePerson(person))
      actions: 
         savePerson: (person: Person) => dispatch(savePerson(person))
      
   
);

【讨论】：

我从你的回答中得到的主要收获是，我没有将 person 对象传递给调用调度的匿名函数，一旦我这样做了，它就起作用了。现在接受这个答案。

内容丰富，谢谢。我想知道dispatch 是否总是返回一个承诺。

内容丰富，谢谢。我想知道dispatch 是否总是返回一个承诺。

在我的例子中，将调度定义为Dispatch<IStoreState> 的类型会引发此异常：Property 'type' is missing in type 'IStoreState'。 （我正在使用反应 16.3.16）

@tudor，谢谢关注，我更新了答案。