Question

代码：

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

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

在我的store.js中：

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

export type AppStateType = ReturnType<typeof rootReducer>

来自Music.reducer.ts的

initialState：

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

此错误弹出：

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)可以正常工作！

为什么类型的音乐永远不会？请提出任何可能导致这种情况的建议。

Answer 1

您将必须提供自己的界面/类型：

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: []
}

在带有typescript的redux-thunk中，调用getState永远不会返回

1 个答案: