私の経験は主に、アクションとリデューサーが定義されている React Hooks & Context に関するものです。その後、アクションは React コンポーネントにインポートされ、Dispatch 関数を介して呼び出されます。
新しいプロジェクトでは、React Hooks と Redux を使用する必要があります。ここでは Action Creators & Reducers を使用しています。私が作成した Action Creator の例を次に示します。
export const fetchCompanies: ActionCreatorThunk = () => {
return function (dispatch, getState) {
dispatch({ type: FETCH_COMPANIES_REQUEST });
requests
.get(
`${requests.API_ROOT()}companies`,
null,
true
)
.then((response) => {
dispatch({ type: FETCH_COMPANIES_SUCCESS, payload: response.data.companies });
})
.catch((error) => {
console.error(error);
dispatch({ type: FETCH_COMPANIES_FAILURE, payload: error.response });
});
};
};
これはうまくいきます。
私の状況は次のとおりです。「空の」会社を作成するアクションが必要なので、アクション クリエーターを作成する必要はありません。したがって、次のようなアクションを作成しました。
export const INIT_EMPTY_COMPANY: ActionType = 'INIT_EMPTY_COMPANY';
export type InitEmptyCompanyAction = { type: typeof INIT_EMPTY_COMPANY };
Action Creator では、次のuseEffect
ように内部から呼び出していました。
dispatchRedux(fetchCompanies());
アクションを使用すると、次のように、コンテキストを使用してアクションを呼び出す方法と同様のスタイルで呼び出すことができると考えました。
dispatchRedux({ type: InitEmptyServiceFormAction });
InitEmptyCompanyAction
残念ながら、「値の位置から型 [1] を参照できません」というフロー エラーが発生 します。
私は何を間違っていますか、どうすればこれを修正できますか?