Using type as an argument in a hook in a similar fashion to how it is

Question

Using type as an argument in a hook in a similar fashion to how it is

My custom hook utilizes Zustand and is capable of storing various data types. However, I am looking to specify the type of data that will be stored similar to how it is done with the useState hook.

import { Profile } from "@/types";
import { create } from "zustand";

type ActionData = Product | Category | Profile | null;

type ActionDataStore = {
    actionData: ActionData;
    setActionData: (actionData: ActionData) => void;
};

export const useActionData = create<ActionDataStore>((set) => ({
    actionData: null,
    setActionData: (actionData) =>
        set((state) => {
            return { actionData };
        }),
}));

When using this hook within a component, it should be implemented as follows:

const {actionData, setActionData} = useActionData<Profile>()

By specifying <Profile>, TypeScript will flag an error if attempting to assign any other type of data to actionData. This ensures that actionData will always be of type Profile.

reactjs typescript next.js zustand

Answer 1

Answer №1

If you want to make the useActionData hook more generic so that you can specify the type when using it in a component, you can do so by adjusting the ActionDataStore and the useActionData hook to be generic. Here's an example of how you can achieve this:

import { create } from "zustand";
import { Profile, Product, Category } from "@/types";

type ActionData = Product | Category | Profile | null;

type ActionDataStore<T extends ActionData> = {
  actionData: T;
  setActionData: (actionData: T) => void;
};

export const useActionData = <T extends ActionData>(
  defaultData: T | null = null
) =>
  create<ActionDataStore<T>>((set) => ({
    actionData: defaultData,
    setActionData: (actionData) =>
      set((state) => {
        return { actionData };
      }),
  }));

// Example of using the hook with Profile type
const { actionData, setActionData } = useActionData<Profile>();

I hope this explanation helps!

Answer 2

If you want to make the useActionData hook more generic so that you can specify the type when using it in a component, you can do so by adjusting the ActionDataStore and the useActionData hook to be generic. Here's an example of how you can achieve this:

import { create } from "zustand";
import { Profile, Product, Category } from "@/types";

type ActionData = Product | Category | Profile | null;

type ActionDataStore<T extends ActionData> = {
  actionData: T;
  setActionData: (actionData: T) => void;
};

export const useActionData = <T extends ActionData>(
  defaultData: T | null = null
) =>
  create<ActionDataStore<T>>((set) => ({
    actionData: defaultData,
    setActionData: (actionData) =>
      set((state) => {
        return { actionData };
      }),
  }));

// Example of using the hook with Profile type
const { actionData, setActionData } = useActionData<Profile>();

I hope this explanation helps!

Using type as an argument in a hook in a similar fashion to how it is

Answer №1

Similar questions

Path for WebStorm file watcher's output

"Encountering a 500 error on Chrome and Internet Explorer while trying to sign

Unit Testing in Vue.JS: The original function remains active even after using sinon.stub()

Creating a generic component map resolver for flexible applications

When the React router remounts the component, the state remains unchanged

Typedoc Error: Attempted to assign a value to an undefined option (mode)

Error: Incorrect format detected. Expected a numerical value, but received: "t". This issue occurred when attempting to provide a slug URL to the GraphQL query function within a Next.js application

React opacity transition component not switching fade direction

Next.js - Reconstructing exclusively fresh sections

I'm encountering an issue where Typescript is unable to locate the Firebase package that I

Tips for automatically updating a MaterialUI DataGrid in a React JS application

Alter the hyperlink to a different value based on a specific condition

Nextjs compatibility with React slick

Executing a Function Prior to onClick Event of a Link Element in Next.js

Challenge with Typescript Interfaces

Fairly intricate React function component declaration with TypeScript

Implementing typing for a module that exports an instance of a particular class

Encountering a problem while trying to install the Firebase module on Node.js: getting a

The onTableChange function in Mui-Datatable does not seem to be functioning properly when attempting to

Mern, Issue with Removing Comments