0

It seems to me that I have all the types correct, however am I missing a different kind of Reducer type?

IinitialAssetsState' is not assignable to type 'Reducer'

The full error:

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'.

enter image description here

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 tried

I created a type for the action to remove the use of any, but I still run into 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
      };
    }

1 Answer 1

2

I believe this might be the problem in store.ts:

export const defaultInitialState = {
  AssetsReducer: { assets: [], loading: false, portfolio: [] },
  BoardReducer: { overlay: false },
}

Here defaultInitialState.assets is of type never[].

You need set the type for defaultInitialState

export const defaultInitialState : IinitialState  = {
  AssetsReducer: { assets: [], loading: false, portfolio: [] },
  BoardReducer: { overlay: false },
}

Edit: Also in AssetsReducer and BoardReducer

const defaultBoardState : IinitalBoardState = { overlay: false };

Sign up to request clarification or add additional context in comments.

3 Comments

add the types also in AssetsReducer and BoardReducer
BoardReducer : const defaultBoardState : IinitalBoardState = { overlay: false };
AH Thanks! Yes that was it :D

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.