web-dev-qa-db-ja.com

TS2339：プロパティ 'tsReducer'はタイプ 'DefaultRootState'に存在しません

上記の質問に苦労しています。同様の質問を見たが、それを理解することはできません。

以下のコードは、.jsと.jsxを使用する既存のReactプロジェクトでTypeScriptを使用して初めてダイアログを開いたり閉じたりすることを試みています。

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;

'./types'から{ActionTypes}をインポートします。

エクスポートインターフェイスTsDialogAction {isDialogOpen：boolean number：number}

エクスポートインターフェイスCloseTsDialog {タイプ：ActionTypes.closeDialogペイロード：TsDialogAction}

エクスポートインターフェイスOpenTsDialog {タイプ：ActionTypes.openDialogペイロード：TsDialogAction}

エクスポートインターフェイスIncrement {タイプ：ActionTypes.incrementペイロード：TsDialogAction}

エクスポートインターフェイスDecrement {タイプ：ActionTypes.decrementペイロード：TsDialogAction}

export const closeTsDialog =（id：number）=>（{type：ActionTypes.closeDialog、payload：id}）; export const openTsDialog =（id：number）=>（{type：ActionTypes.openDialog、payload：id}）; export const incrementAction =（id：number）=>（{type：ActionTypes.increment、payload：id}）; export const decrementAction =（id：number）=>（{type：ActionTypes.decrement、payload：id}）;

reactjstypescriptredux
2
fullStackRyan

次のように、セレクタでstate引数の型を宣言する必要があります。

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

TypeScriptの使用に関するReduxのドキュメント と、例として 静的型付けに関するReact-Reduxのドキュメントページ を参照してください。

（また、スタイル上の注意として、ルート状態ではtsReducerを呼び出さないでください。処理するデータと一致する名前を付けてください。たとえば、state.ui。）

4
markerikson