user15084210
user15084210

Reputation:

The type of dispatch in typescript

Since I imagine in typescript we should avoid as much as possible using 'any' types I am rewriting all the anys a bit to transform them into more precise types but I am facing a problem when I try to change the type 'any' of the dispatch function of react redux. I don't know what to replace it with?

themeActions.ts :

export const SWITCH_THEME: string = "SWITCH_THEME";

export const switchTheme = (theme: string) => {

    return (dispatch: any) => {
        
        dispatch({ type: SWITCH_THEME, theme: theme })
        localStorage.setItem('theme', theme);

    }

}

themeReducer.ts :

import {SWITCH_THEME} from './themeActions';

const initialState = {
    theme: localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'
}

const themeReducer = (state = initialState, action: {type: string, theme: string}) => {
    switch (action.type) {
        case SWITCH_THEME:
            return {
                ...state,
                theme: action.theme
            }
            default:
                return state
    }
}

export default themeReducer;

Upvotes: 3

Views: 6924

Answers (1)

Just use import { Dispatch } from 'redux'

export const switchTheme = (theme: string) => {

    return (dispatch: Dispatch) => {
        
        dispatch({ type: SWITCH_THEME, theme: theme })
        localStorage.setItem('theme', theme);

    }

}

Upvotes: 3

Related Questions