I am trying to set up a redux store for my front-end application, however I'm experiencing some typing errors which I've as of yet been unable to solve. The error shows up in store.ts when trying to configure (create?) the store. const store = configureStore({ reducer: userReducer });
The error in question:
Type '(state: { users: { [id: string]: User; }; } | undefined, action: Actions) => { users: { [id: string]: User; }; } | { users: User; }' is not assignable to type 'Reducer<{ users: { [id: string]: User; }; }, Actions> | ReducersMapObject<{ users: { [id: string]: User; }; }, Actions>'.
Type '(state: { users: { [id: string]: User; }; } | undefined, action: Actions) => { users: { [id: string]: User; }; } | { users: User; }' is not assignable to type 'Reducer<{ users: { [id: string]: User; }; }, Actions>'.
Type '{ users: { [id: string]: User; }; } | { users: User; }' is not assignable to type '{ users: { [id: string]: User; }; }'.
Type '{ users: User; }' is not assignable to type '{ users: { [id: string]: User; }; }'.
Types of property 'users' are incompatible.
Type 'User' is not assignable to type '{ [id: string]: User; }'.
Index signature for type 'string' is missing in type 'User'.ts(2322)
configureStore.d.ts(21, 5): The expected type comes from property 'reducer' which is declared here on type 'ConfigureStoreOptions<{ users: { [id: string]: User; }; }, Actions, [ThunkMiddleware<{ users: { [id: string]: User; }; }, AnyAction, undefined>]>'
The code in question:
Store.ts:
import { configureStore } from '@reduxjs/toolkit';
import { userReducer } from './reducers/userReducer';
const store = configureStore({ reducer: userReducer });
userReducer.ts:
import { Actions } from '../actiontypes/actionTypes';
import { User } from '../../types/user';
import { useResolvedPath } from 'react-router-dom';
const initialState = {
users: {} as {[id: string]: User},
};
export type State = typeof initialState;
export const userReducer = (state = initialState, action: Actions) => {
switch (action.type) {
case 'ADD_USER':
return {
...state,
users: state.users[action.payload.id] = action.payload,
};
case 'REMOVE_USER':
return {
...state,
users: state.users[action.payload.id] ,
};
default:
return state;
}
};
actionTypes.ts:
import { User } from '../../types/user';
type addUserPayload = User;
type removeUserPayload = User;
interface addUserAction {
type: 'ADD_USER';
payload: addUserPayload;
}
interface removeUserAction {
type: 'REMOVE_USER';
payload: removeUserPayload;
}
export type Actions = addUserAction | removeUserAction
I suspect it to be a fairly simple issue caused by some typing errors, but I just can't seem to figure it out, does any of you know?