Как получить тип AppDispatch Typescript в наборе инструментов redux, когда хранилище инициализируется функцией?

Question

Сегодня мой AppDispatch тип извлекается из store.dispatch:

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import auth from "./auth/authSlice";
const rootReducer = combineReducers({ auth });
const store = configureStore({
  reducer: rootReducer
});
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;
export default store;

Сейчас пытаюсь заменить store функцией initStore. Я хочу обновить свой магазин с помощью preloadedState.

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import auth from "./auth/authSlice";
const rootReducer = combineReducers({ auth });
const store = (preloadedState={}) => {
  return configureStore({
    reducer: rootReducer,
    preloadedState,
  });
}
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = typeof store.dispatch;
export default store;

У меня ошибка:

Property 'dispatch' does not exist on type '(preloadedState?: {}) => EnhancedStore<CombinedState<{ auth: AuthState; }>, AnyAction, [ThunkMiddleware<CombinedState<{ auth: AuthState; }>, AnyAction, null> | ThunkMiddleware<...>]>'.ts(2339)

Как правильно получить тип AppDispatch?

Answer 1

Вы изменились storeот фактического экземпляра хранилища Redux до "функции, возвращающей хранилище Redux", без исправления остальной части вашего кода для соответствия этому. Итак, первая проблема заключается в том, чтоtypeof store.dispatch; не будет работать на этом этапе кода, потому что store является функцией, а не фактическим экземпляром магазина.

Кроме того, я не уверен, как вам на самом деле удастся получить такой тип dispatchздесь, потому что вы еще не создали хранилище, когда определяется тип. Я полагаю, вы могли бы попробовать что-то подобное, но я не знаю, сработает ли это:

const initStore = (preloadedState={}) => {
  return configureStore({
    reducer: rootReducer,
    preloadedState,
  });
}
export type RootState = ReturnType<typeof rootReducer>;
export type AppDispatch = ReturnType<typeof initStore>["dispatch"];
export default initStore ;