无法在 TypeScript 中访问 redux 状态对象的键

Question

I am using typescript in Ionic along with React hooks, so I was adding my errorReducer in it which handles the error user gets from server in case anything goes wrong.

Here is my code below

Action

  import { ERROR_OCCURED } from "./types";
    export const errorActions = () => async (dispatch: any) => {
      console.log('err action triggered')
      dispatch({
        type: ERROR_OCCURED
      });
    };

Reducer

import { ERROR_OCCURED } from "../actions/types";
function fetchRedcuer(state = {}, action: any) {
  switch (action.type) {
    case ERROR_OCCURED:
      return {
        ...state,
         isauth:true
      };

    default:
      return state;
  }
}

export default fetchRedcuer;

then in my typescript component

import { useSelector, useDispatch } from "react-redux";
import React, { useState, useEffect } from "react";
import { userRegisterAction } from "../../src/redux/actions/user";
import { RootState } from "../redux/reducers";

type IUser = {
  error: { [isauth: string]: boolean };
};

const Signup: React.FC<IUser> = (props) => {
  const [state, setState] = useState<IUser>({
  error:{}
  });
  const dispatch = useDispatch();
  const error = useSelector((state: RootState) => {
    console.log(state.error);                     //here i get access to my state that is inside error reducer and also here i get error when i try to access boolean value
    return { error: state.error };   
  });
  console.log(error.error);
  return (
    <div>

    </div>
  );
};

export default Signup;

so on

console.log(state.error)

initally I get {} but then after the state has been updated i get

{isauth: true}

but then if i try to access this boolean value in useSelector by

console.log(state.error.isauth)

I get the typescript error which states

Property 'isauth' does not exist on type '{}'.

OR in simple words how do I tell TypeScript to somehow initially skip the empty object{} and not check for its key value pairs as updating state takes a little time

Answer 1

I recommend to stay consistent and instead of passing empty error object {}.

In error pass:

{ isauth: false; }

I believe Typescript is for that purpose only, to let you know your mistakes at early stage's. So everyone who looks at your component will know, the data you will be extracting(holding)!