4

提供されたドキュメントを使用して、redux プロジェクトを typescript に変換しようとしています。

https://redux.js.org/usage/usage-with-typescript#type-checking-middleware

ただし、カスタム ミドルウェアでそれを行うのに問題があります。これは、エラーの原因となる最小化および抽出されたコードです。

store.ts:

import { configureStore } from '@reduxjs/toolkit';

import reducer from './customReducer';

import { customMiddleware } from "./customMiddleware";

const store = configureStore({
    reducer: {
        custom: customReducer
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(customMiddleware)

})

export type RootState = ReturnType<typeof store.getState>

export default store

customMiddleware.ts:

import { Middleware } from 'redux';
import { RootState } from './store';

export const customMiddleware = (): Middleware<{}, RootState> => {
    return store => next => action => {
        return next(action);
    }
}

これにより、いくつかのエラー メッセージが表示されます: on const store = configur...:

'store' は型注釈を持たず、独自の初期化子で直接または間接的に参照されるため、暗黙的に型 'any' を持ちます。

RootState エクスポート:

タイプ エイリアス 'RootState' が自身を循環的に参照しています。

customMiddleware エクスポート:

'customMiddleware' には型注釈がなく、独自の初期化子で直接的または間接的に参照されるため、暗黙的に型 'any' があります。

4

2 に答える 2

5

その場合、どうにかして円を壊す必要があります。

ここで最も簡単な方法は

export type RootState = ReturnType<typeof customReducer>

編集：ここの最初のコードは reducer: customReducer

指定されたコードでは機能しません。ストアを作成する前に、レデューサーの作成を分割する必要があります。

const rootReducer = combineRecucers({
        custom: customReducer
})

export type RootState = ReturnType<typeof rootReducer>

const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(customMiddleware)

})
于 2021-07-02T15:53:10.207 に答える
0

ああ、わかりました。問題は、customMiddleware を定義する方法にありました。ドキュメントでは、エクスポートをミドルウェアとして単純に定義しています。

export const customMiddleware: Middleware = store => next => action => {
    return next(action);
}

しかし、実際のコードにはいくつかの初期化があるため、ミドルウェアを返す関数としてエクスポートしました。

export const customMiddleware = (): Middleware => {
    return store => next => action => {
        return next(action);
    }
}

したがって、先頭に追加するときに関数として呼び出すだけで済みました。

middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(customMiddleware())

私はとても愚かです...

編集:ルートレデューサータイプの使用も必要でした。

于 2021-07-05T08:26:44.440 に答える