如何在Redux reducer中使用Typescript

Question

目前在Redux reducer作为action的typescript类型，我使用any。我应该用什么来代替any，因为使用它是一个不好的做法?

我试图通过导入import { Action } from "redux";来使用Action类型，但随后我得到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?

谢谢!

Answer 1

你可以给它AnyAction类型:

像这样:

import { AnyAction } from 'redux'
interface CounterState {
value: number
}
const initialState: CounterState = {
value: 0
}
export default function counterReducer(
state = initialState,
action: AnyAction
) {
// logic here
}

Answer 2

一般来说，我们正式推荐使用官方的Redux工具包，特别是TypeScript，因为它大大减少了你必须首先编写的TypeScript类型的数量，并且主要面向推理风格的TypeScript。这样的问题是不会出现的。

至于涉及到的TypeScript有多少，看一下这个api文档页面上的第一个例子，在TS和JS选项卡之间切换，看看它们的区别。

如果你想开始使用这个，你可以去这里做一个快速的比较，然后最好遵循官方的Redux教程。

关于TypeScript特定的设置说明，请参见TypeScript快速入门文档页面

PS:我知道这不是问题的答案，但通常人们问这个问题是因为他们在遵循可怕的过时教程而不是官方文档，我想让那些人意识到这一点。