Question 200549 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Getting the object in the Typescript not working (Defining useReducer hook types)

I have this piece of code in types.ts file,

import { CategoryType } from "../../types/CategoryItemCount";
import { ModelErrorType } from "../../types/ModelError";

export const ACTIONS = {
  SET_CATEGORIES: "SET_CATEGORIES",
  ADD_CATEGORIS: "ADD_CATEGORIES",
  UPDATE_CATEGORIES: "UPDATE_CATEGPRIES",
  DELETE_CATEGORIES: "DELETE_CATEGORIES",
  SET_MODEL_ERRORS: "SET_MODEL_ERRORS",
  SENDING_REQUEST: "SENDING_REQUEST",
  REQUEST_COMPLETED: "REQUEST_COMPLETED",
};

export type Action =
  | { type: ACTIONS.SET_CATEGORIES, payload: CategoryType[] }
  | { type: ACTIONS.ADD_CATEGORIES, payload: CategoryType }
  | { type: ACTIONS.UPDATE_CATEGORIES, payload: CategoryType }
  | { type: ACTIONS.DELETE_CATEGORIES, payload: number }
  | { type: ACTIONS.SET_MODEL_ERRORS, payload: ModelErrorType[] }
  | { type: ACTIONS.SENDING_REQUEST }
  | { type: ACTIONS.REQUEST_COMPLETED };

export type State = {
  categories: CategoryType[];
  modelErrors: ModelErrorType[];
  loading: boolean;
};

I am trying to use ACTIONS value in the type that is,

 { type: ACTIONS.SET_CATEGORIES, payload: CategoryType[] }

But I am getting error which says Cannot find namespace 'ACTIONS'. . What am I doing wrong?

I tried couple of ways to fix this issue but none of them work. I am expecting to use the ACTIONS.SET_CATEGORIES value while defining the type for the Action. Basically this is for useReducer hook.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So the fix was to use the enum, Something like this,

    export const enum ACTIONS {
  SET_CATEGORIES,
  ADD_CATEGORY,
  UPDATE_CATEGORY,
  DELETE_CATEGORY,
  SET_MODEL_ERRORS,
  SENDING_REQUEST,
  REQUEST_COMPLETED,
}


export type Action =
  | { type: ACTIONS.SET_CATEGORIES; payload: CategoryDisplayType[] }
  | { type: ACTIONS.ADD_CATEGORY; payload: CategoryDisplayType }
  | { type: ACTIONS.UPDATE_CATEGORY; payload: CategoryModelType }
  | { type: ACTIONS.DELETE_CATEGORY; payload: DeleteCategoryType }
  | { type: ACTIONS.SET_MODEL_ERRORS; payload: ModelErrorType[] }
  | { type: ACTIONS.SENDING_REQUEST }
  | { type: ACTIONS.REQUEST_COMPLETED };

  2. 0

    Only a type can be assigned to a type. And ACTIONS.SET_CATEGORIES is not a type.

    Rather try:

     { type: typeof ACTIONS.SET_CATEGORIES, payload: CategoryType[] }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search