TS2339: свойство 'tsReducer' не существует для типа 'DefaultRootState'

Question

Борьба с вышеуказанным вопросом. Видел похожие вопросы, но не могу понять.

В приведенном ниже коде я пытаюсь открыть и закрыть диалог с использованием TypeScript в первый раз в существующем проекте React, который использует. js и .jsx.

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import {useDispatch, useSelector} from 'react-redux';
import {closeTsDialog} from '../actions/tsDialog'
import {ActionTypes} from '../actions/types';

const TsApp = (): JSX.Element => {
    const dispatch = useDispatch();

// ERROR SHOWS UP ON LINE BELOW "state?.tsReducer?.isDialogOpen"
    const isDialogOpen = useSelector(state => state?.tsReducer?.isDialogOpen);
    const state = useSelector(s => s);
    console.log('->>>>>> state', state);


    // main tsx excluded to allow for posting on stackoverflow
};


export default TsApp;

import {TsDialogAction} from "../actions/tsDialog";


const initialState = {
    id: 0,
    isDialogOpen: false
};

const tsReducer = (state: TsDialogAction = initialState, action: Action) => {
    switch (action.type) {
        case ActionTypes.closeDialog: {
            return {...state, isDialogOpen: false};
        }
        case ActionTypes.openDialog: {
            return {...state, isDialogOpen: true};
        }
        default:
            return state;
    }
};

export default tsReducer;

импорт {ActionTypes} из './types';

интерфейс экспорта TsDialogAction {isDialogOpen: логическое число: число}

интерфейс экспорта CloseTsDialog { тип: ActionTypes.closeDialog полезная нагрузка: TsDialogAction}

интерфейс экспорта OpenTsDialog {тип: ActionTypes.openDialog полезная нагрузка: TsDialogAction}

интерфейс экспорта Увеличение {тип: ActionTypes.increment полезная нагрузка: TsDialogAction}

1016 * интерфейс экспорта Decrement {тип: ActionTypes.decrement полезная нагрузка: TsDialogAction}

экспорт const closeTsDialog = (id: number) => ({type: ActionTypes.closeDialog, payload: id}); export const openTsDialog = (id: number) => ({type: ActionTypes.openDialog, payload: id}); export const incrementAction = (id: номер) => ({тип: ActionTypes.increment, полезная нагрузка: идентификатор}); export Const DecmentAction = (id: номер) => ({тип: ActionTypes.decrement, полезная нагрузка: id});

Answer 1

Вам необходимо объявить тип аргумента state в вашем селекторе, например:

const isDialogOpen = useSelector( (state: RootState) => state.tsReducer.isDialogOpen);

Пожалуйста, ознакомьтесь с документами Redux по использованию TypeScript , а также Страница документов React-Redux для stati c, набрав для примеров.

(Также, в качестве стилиста c примечание: пожалуйста, не называйте это tsReducer в вашем root дать ему имя, соответствующее данным, которые он обрабатывает, например state.ui.)