Question

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

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的匿名函数。

Answer 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))
      }
   }
);

带有打字稿的mapDispatchToProps很难

1 个答案: