It appears that I have correctly identified all the types, but could there be a different type of Reducer missing?
'IinitialAssetsState' is not assignable to type 'Reducer'
The complete error message:
Type '(state: { assets: never[]; portfolio: never[]; loading: boolean; } | undefined, action: any) => IinitialAssetsState' is not assignable to type 'Reducer'.
Types of parameters 'state' and 'state' are incompatible.
Type 'IinitialAssetsState | undefined' is not assignable to type '{ assets: never[]; portfolio: never[]; loading: boolean; } | undefined'.
Type 'IinitialAssetsState' is not assignable to type '{ assets: never[]; portfolio: never[]; loading: boolean; }'.
Types of property 'assets' are incompatible.
Type 'IAsset[]' is not assignable to type 'never[]'.
Type 'IAsset' is not assignable to type 'never'.
https://i.stack.imgur.com/90WA8.png
My store.ts file
import { applyMiddleware, createStore, combineReducers } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'
import { IinitialState } from './shared/types'
import { AssetsReducer } from './reducers/assets'
import { BoardReducer } from './reducers/board'
const rootReducer = combineReducers({
AssetsReducer,
BoardReducer
});
export const defaultInitialState = {
AssetsReducer: { assets: [], loading: false, portfolio: [] },
BoardReducer: { overlay: false },
}
export function initializeStore(initialState: IinitialState = defaultInitialState) {
return createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(thunkMiddleware))
)
}
AssetsReducer
import { Actions } from '../actions/assets'
import { IinitialAssetsState } from '../shared/types'
const defaultAssetsState = { assets: [], portfolio: [], loading: false };
export const AssetsReducer = (state = defaultAssetsState, action: any): IinitialAssetsState => {
switch (action.type) {
case Actions.GET_ALL_ASSETS: {
const { assets } = action;
return {
...state,
assets,
loading: false
};
}
default:
return state;
}
};
BoardReducer
import { Actions } from '../actions/board'
import { IinitalBoardState } from '../shared/types'
const defaultBoardState = { overlay: false };
export const BoardReducer = (state = defaultBoardState, action: any): IinitalBoardState => {
switch (action.type) {
case Actions.SET_OVERLAY_STATE: {
const { overlay } = action;
return {
overlay
};
}
default:
return state;
}
};
My types file
export interface IAsset {
position: number;
marketCap: number;
name: string;
percentage: number;
price: number;
currency: string;
value: number;
}
export interface IinitialAssetsState {
assets: IAsset[];
portfolio: IAsset[];
loading: boolean;
}
export interface IinitalBoardState {
overlay: boolean;
}
export interface IinitialState {
AssetsReducer: IinitialAssetsState;
BoardReducer: IinitalBoardState;
}
What I've attempted
I defined a type for the action to eliminate the usage of any, but I am still encountering the same Typescript error:
interface IAssetsAction {
type: string;
assets: IAsset[];
}
export const AssetsReducer = (state = defaultAssetsState, action: IAssetsAction): IinitialAssetsState => {
console.log('action', action);
switch (action.type) {
case Actions.GET_ALL_ASSETS: {
const { assets } = action;
return {
...state,
assets,
loading: false
};
}