How to pass type of combineReducers. Receiving error: Property '... does not exist on type 'Reducer<CombinedState{}

Question

I am adding typeScript to my react/redux project. I am unable to load my app because I am receiving the error:

Here in index.tsx is where I combine my reducers and define type state:

import FormHandlerReducer from './FormHandler'
import { combineReducers} from 'redux';
import sideDrawerToggle from './sideDrawer'
import submitAlertReducer from './submitAlert'
import classesReducer from './classes'
import testReducer from './testList'
import studySessionReducer from './studySession'
import testGradeReducer from './testGradeHandler'
import homePageReducer from './homePageHandler'

const allReducers = combineReducers({studySessionReducer, FormHandlerReducer, sideDrawerToggle, submitAlertReducer, classesReducer, testReducer, testGradeReducer, homePageReducer})

export default allReducers
export type State = ReturnType<typeof allReducers>;

Here is the file where I am trying to use the state

import React from 'react';
import './ShowStudySessions.css'
import { useSelector } from 'react-redux'
import State from '../../reducers'

interface ShowStudySession {
  studySessions:{
    classId: number,
    testId: number
  }
}

const ShowStudySession = ({studySessions}: ShowStudySession) => { 
  const classId = studySessions.classId
  const testId = studySessions.testId
  const studySessionList = useSelector((state: typeof State) => state.studySessionReducer[classId][testId].studySessionList)

Answer 1

Maybe typo, you should use the type State = ReturnType<typeof allReducers>; in useSelector

reducers.ts:

import { combineReducers } from 'redux';

const studySessionReducer = () => {};

const allReducers = combineReducers({
  studySessionReducer,
});

export default allReducers;
export type State = ReturnType<typeof allReducers>;

component.tsx:

import { useSelector } from 'react-redux';
import { State } from './reducers';

const ShowStudySession = ({ studySessions }) => {
  const classId = studySessions.classId;
  const testId = studySessions.testId;
  const studySessionList = useSelector((state: State) => state.studySessionReducer[classId][testId].studySessionList);

  return null;
};