Currently in Redux reducer as a typescript type for action I'm using any. What should I replace any since using it is a bad practise?

I tried to use Action type by importing import { Action } from "redux"; but then I get errors as Property 'homePageMovies' does not exist on type 'Action<any>'. and equivalent to this for other action types.

reducer:

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>

What should I replace any with?

Thanks!

Currently in Redux reducer as a typescript type for action I'm using any. What should I replace any since using it is a bad practise?

I tried to use Action type by importing import { Action } from "redux"; but then I get errors as Property 'homePageMovies' does not exist on type 'Action<any>'. and equivalent to this for other action types.

reducer:

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>

What should I replace any with?

Thanks!

• javascript
• reactjs
• typescript
• redux
• react-redux

Share Improve this question Follow asked Aug 27, 2021 at 9:50 rumonrumon 61633 gold badges1212 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can give it AnyAction type instead:

Something like this:

import { AnyAction } from 'redux'

interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0
}

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

Generally we officially remend using the official Redux Toolkit, especially with TypeScript, as it massively reduces the amount of TypeScript types you will have to write in the first place and is heavily geared towards inference-style TypeScript. Questions like this will not e up there.

As for how little TypeScript is involved, take a look at the first example on this api documentation page and switch between the TS and JS tab and look for the differences.

If you want to get started with this, you can go here for a quick parison and then best follow the official Redux tutorial.

As for TypeScript-specific setup instructions, see the TypeScript QuickStart docs page

PS: I know this is not the answer to the question, but usually people ask this question because they are following horribly outdated tutorials instead of the official documentation and I want to make those aware of it.