web-dev-qa-db-ja.com

TypeScriptを使用したmapDispatchToPropsは難しい

TypeScriptとreduxを使用して単純なリアクションクラッディングアプリを構築しようとすると、次の問題が発生しました。ここに見られるように、引数として人物オブジェクトを取るという指定された署名を持つ関数があります。

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

コンポーネントを接続し直そうとすると、mapDispatchToPropsで問題が発生します。これが私のコードです。

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

問題は、savePerson関数に人を渡す必要があることですが、mapDispatchToPropsの状態にアクセスできず、関数に引数がないため、コードがコンパイルされません。何か案は？

ソリューションで編集：

このコードを機能させるために必要な変更が1つあるコードを次に示します。

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

dispatchを呼び出している匿名関数にpersonオブジェクトを渡す必要がありました。

reactjstypescriptredux
11
Chaim Friedman
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))
      }
   }
);
8
Yozi