首页 > 解决方案 > 如何将 Typescript 与 Redux reducer 一起使用

问题描述

目前在 Redux reducer 作为action我正在使用的打字稿类型any。我应该更换什么,any因为使用它是一种不好的做法?

我尝试Action通过导入来使用类型,但是对于其他操作类型,import { Action } from "redux";我得到了与此相同的错误。Property 'homePageMovies' does not exist on type 'Action<any>'.

减速器:

import { 
    ADD_HOME_PAGE_MOVIES,
    CHANGE_SELECTED_MOVIE, 
    IS_MOVIE_PAGE_OPENED,
    SEARCHED_MOVIE,
    CURRENT_PAGE
} from "./actions";

const initialState = {
    homePageMovies: [],
    selectedMovie: 0,
    isMoviePageOpened: false,
    searchedMovie: '',
    currentPage: 1
  }

function rootReducer( state = initialState, action: any ){
    switch(action.type) {
        case ADD_HOME_PAGE_MOVIES:
            return {
                ...state,
                homePageMovies: action.homePageMovies
            }
        case CHANGE_SELECTED_MOVIE:
            return {
                ...state,
                selectedMovie: action.selectedMovie
            }
        case IS_MOVIE_PAGE_OPENED:
            return {
                ...state,
                isMoviePageOpened: action.isMoviePageOpened
            }
        case SEARCHED_MOVIE:
            return {
                ...state,
                searchedMovie: action.searchedMovie
            }
        case CURRENT_PAGE:
            return {
                ...state,
                currentPage: action.currentPage
            }
         default: 
            return state;
     }
}

export default rootReducer;
export type RootState = ReturnType<typeof rootReducer>

我应该用什么代替any

谢谢!

标签: javascriptreactjstypescriptreduxreact-redux

解决方案


你可以给它AnyAction类型:

像这样的东西:

import { AnyAction } from 'redux'

interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0
}

export default function counterReducer(
  state = initialState,
  action: AnyAction
) {
  // logic here
}

推荐阅读