In redux-thunk with typescript, calling getState returns never

Question

Code:

type MyType = ThunkAction<void, AppStateType, unknown, ActionTypes>

export const play = (): MyType =>
  (dispatch, getState) => {
    const music = getState().music
    if(music.list.length !== 0)
      dispatch(play())
  }

In my store.js:

const rootReducer = combineReducers({
  music: MusicReducer,
  auth: AuthReducer,
})

export type AppStateType = ReturnType<typeof rootReducer>

initialState from Music.reducer.ts:

const initialState = {
  playStatus: STOPPED,
  selectedSongId: 1,
  volume: 0,
  list: []
}

MusicReducer:

import * as playerConstants from '../constants/Player'
import { musicAPI } from '../api/api'
import { AppThunk } from '../types'
import { ThunkAction } from 'redux-thunk'
import { AppStateType } from '../redux/store'

const ATTEMPT_PLAY = 'react-social-network/music/ATTEMPT_PLAY'
const ATTEMPT_RESET = 'react-social-network/music/ATTEMPT_RESET'
const PLAY_SONG = 'react-social-network/music/PLAY_SONG'
const PAUSED_SONG = 'react-social-network/music/PAUSED_SONG'
const SELECT_SONG = 'react-social-network/music/SELECT_SONG'
const SET_VOLUME = 'react-social-network/music/SET_VOLUME'
const SET_LIST = 'react-social-network/music/SET_LIST'

const initialState = {
  attemptStatus: null,
  playStatus: playerConstants.STOPPED,
  selectedSongId: 1,
  volume: 0,
  list: []
}

const MusicReducer = (state = initialState, action: ActionTypes) => {
  switch(action.type)
  {
    case ATTEMPT_PLAY:
      return {
        ...state,
        attemptStatus: playerConstants.PLAYING
      }
    case ATTEMPT_RESET:
      return {
        ...state,
        attemptStatus: null
      }
    case PLAY_SONG:
      return {
        ...state,
        playStatus: playerConstants.PLAYING
      }
    case PAUSED_SONG:
      return {
        ...state,
        playStatus: playerConstants.PAUSED
      }
    case SELECT_SONG:
      return {
        ...state,
        attemptStatus: playerConstants.PLAYING,
        playStatus: playerConstants.STOPPED,
        selectedSongId: action.id
      }
    case SET_VOLUME:
      return {
        ...state,
        volume: action.volume
      }
    case SET_LIST:
      return {
        ...state,
        list: action.list
      }
    default:
      return state
  }
}

type ActionTypes =attemptPlayActionType | attemptResetActionType | setPlayActionType |
  pauseActionType | selectActionType | setVolumeActionType | setListActionType

type attemptPlayActionType = { type: typeof ATTEMPT_PLAY }
export const attemptPlay = (): attemptPlayActionType => ({ type: ATTEMPT_PLAY })

type attemptResetActionType = { type: typeof ATTEMPT_RESET }
export const attemptReset = (): attemptResetActionType => ({ type: ATTEMPT_RESET })

type setPlayActionType = { type: typeof PLAY_SONG }
export const setPlay = (): setPlayActionType => ({ type: PLAY_SONG })

type pauseActionType = { type: typeof PAUSED_SONG }
export const pause = (): pauseActionType => ({ type: PAUSED_SONG })

type selectActionType = { type: typeof SELECT_SONG, id: number }
export const select = (id: number): selectActionType => ({ type: SELECT_SONG, id })

type setVolumeActionType = { type: typeof SET_VOLUME, volume: number }
export const setVolume = (volume: number): setVolumeActionType => ({ type: SET_VOLUME, volume })

type setListActionType = { type: typeof SET_LIST, list: Object[] }
export const setList = (list: Object[]): setListActionType => ({ type: SET_LIST, list })

type ThunkType = AppThunk<ActionTypes>

export const requestSongs = (): ThunkType =>
  async (dispatch: any) => {
    const list = await musicAPI.requestSongs()
    dispatch(setList(list))
  }

type TestType = ThunkAction<void, AppStateType, unknown, ActionTypes>

export const play = (): TestType =>
  (dispatch, getState) => {
    const music = getState().music
    if(music.list.length !== 0)
      dispatch(attemptPlay())
  }

export default MusicReducer

This error pops up:

Property 'list' does not exist on type 'never'.  TS2339

    103 |   (dispatch, getState) => {
    104 |     const music = getState().music
  > 105 |     if(music.list.length !== 0)
        |              ^
    106 |       dispatch(play())
    107 |   }

(dispatch: Dispatch<ActionTypes>, getState: () => AppStateType) works without problems!

Why is music of type never? Please any suggestions why this could happen.

Could you add more details of the component where ` (dispatch, getState)` is used? — MaartenDev, Jul 06 '20 at 16:20

score 1 · Answer 1 · answered Jul 06 '20 at 16:19

1

You will have to provide your own interface/type:

export interface MusicState {
  attemptStatus?: number,
  playStatus: PlayerConstants,
  selectedSongId: number,
  volume: number,
  list: number[]
}

const initialState: MusicState  = {
  attemptStatus: null,
  playStatus: playerConstants.STOPPED,
  selectedSongId: 1,
  volume: 0,
  list: []
}

answered Jul 06 '20 at 16:19

MaartenDev

4,068
5
16
28

I using ```export type initialStateType = typeof initialState```. This is problem? – Rodriguez Jul 06 '20 at 16:48
@Rodriguez were you able to figure out what was the problem? I am having the same issue. – Lalit Indoria Mar 10 '21 at 06:30

In redux-thunk with typescript, calling getState returns never

1 Answers1