javascript - Use TypeScript for React reducers

Question

I have this code where I connect all my reducers:

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { login } from './login';
import { register } from './register';
import { dashboard } from './dashboard';
import { refreshedToken } from './refreshedToken';
import { updateUserReducer } from './updateUser';
import {History} from "history";

const rootReducer = (history: History) =>
  combineReducers({
    router: connectRouter(history),
    dashboard,
    login,
    refreshedToken,
    register,
    updateUserReducer,
  });
export default rootReducer;
export type RootState = ReturnType < typeof rootReducer >

I my component I do:

const selector = useSelector((s: RootState) => s);

also I get data from selector:

const httpResponse = selector.updateUserReducer.response;

The issue is that I get an error from TypeScript when I hover over updateUserReducer:

TS2339: Property 'updateUserReducer' does not exist on type 'Reducer { router: RouterState ; dashboard: { dashboardRequest: boolean; user: any; error: string; dashboardSuccess: boolean; } | { dashboardRequest: boolean; user: {}; error: any; dashboardSuccess: boolean; }; login: { ...; } | { ...; }; refreshedToken: { ...; } | { ...; }; register: { ...; }; ...'.

Why does this appear and how to solve the issue?

question from:https://stackoverflow.com/questions/65881925/use-typescript-for-react-reducers

Answer 1

here is redux docs on how to use typescript with redux and react-redux

this code is fine i think the problem is with the return type of your reducer. check the document step by step for finding your exact problem.