My current React Redux app store setup using TypeScript looks like this:
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '../reducer/combineReducer';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
const logger = createLogger();
const initialState = {
};
const store = configureStore({
reducer: rootReducer,
middleware: [logger, thunk],
devTools: process.env.NODE_ENV !== 'production',
preloadedState: initialState
});
export default store;
However, I want to add some initial global data structure in the preloadedState, so I updated the initialState code like this:
const initialState = {
user: {}
};
But now I'm seeing an error in Visual Studio Code:
Type '{ user: {}; }' is not assignable to type '{ readonly [$CombinedState]?: undefined; user?: { user: any; loginUser: {}; } | { loginUser: any; user: {}; } | undefined; }'.
Types of property 'user' are incompatible.
Type '{}' is not assignable to type '{ user: any; loginUser: {}; } | { loginUser: any; user: {}; } | undefined'.ts(2322)
configureStore.d.ts(45, 5): The expected type comes from property 'preloadedState' which is declared here on type 'ConfigureStoreOptions<CombinedState<{ user: { user: any; loginUser: {}; } | { loginUser: any; user: {}; }; }>, any, Middleware<{}, any, Dispatch<AnyAction>>[], [...]>'
(property) ConfigureStoreOptions<CombinedState<{ user: { user: any; loginUser: {}; } | { loginUser: any; user: {}; }; }>, any, Middleware<{}, any, Dispatch<AnyAction>>[], [...]>.preloadedState?: {
readonly [$CombinedState]?: undefined;
user?: {
user: any;
loginUser: {};
} | {
loginUser: any;
user: {};
} | undefined;
} | undefined
What should I do to successfully add some initial global field definitions?