How to use Typescript with Redux reducer

Issue

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!

Solution

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
}

Answered By – Ryan Le

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0