Create a custom definition for the useSelector function within a separate TypeScript file in a React

Question

Create a custom definition for the useSelector function within a separate TypeScript file in a React

Question: Is it possible to define a type like <TRootState, string> in an external file and use it directly inside multiple Component files?

External file:

export type TUser = <TRootState, string> // This method does not work

Component's file:

import { TUser } from "./pathToFile"
const user = useSelector<TUser>(selectUser)

I can define the type as follows:

const user = useSelector<TRootState, string>(selectUser)

However, I would like to define it once and be able to apply it in any file that requires it. How can this be achieved?

javascript reactjs typescript

Answer 1

Answer №1

In my previous projects, I have tackled this issue by implementing a strongly typed wrapper for useSelector that is necessary in my workflow.

// selectors.ts
import { useSelector as reduxUseSelector } from 'react-redux'
import { StoreState } from './store'

/** A specialized wrapper specific to the application that provides type safety for redux's useSelector(). */
export function useSelector<T>(fn: (state: StoreState) => T): T {
  return reduxUseSelector(fn)
}

This allows for simpler usage:

import { useSelector } from './selectors'

function Component() {
  const foo = useSelector(state => state.foo) // ensures typing
  //...
}

Furthermore, I propose that instead of directly using selectUser, it would be beneficial to create a hook that utilizes this custom version of useSelector.

import { useSelector } from './selectors'

export function useCurrentUser(): User {
  return useSelector(state => state.user)
}

function Component() {
  const user = useCurrentUser()
  //...
}

Answer 2

In my previous projects, I have tackled this issue by implementing a strongly typed wrapper for useSelector that is necessary in my workflow.

// selectors.ts
import { useSelector as reduxUseSelector } from 'react-redux'
import { StoreState } from './store'

/** A specialized wrapper specific to the application that provides type safety for redux's useSelector(). */
export function useSelector<T>(fn: (state: StoreState) => T): T {
  return reduxUseSelector(fn)
}

This allows for simpler usage:

import { useSelector } from './selectors'

function Component() {
  const foo = useSelector(state => state.foo) // ensures typing
  //...
}

Furthermore, I propose that instead of directly using selectUser, it would be beneficial to create a hook that utilizes this custom version of useSelector.

import { useSelector } from './selectors'

export function useCurrentUser(): User {
  return useSelector(state => state.user)
}

function Component() {
  const user = useCurrentUser()
  //...
}

Create a custom definition for the useSelector function within a separate TypeScript file in a React

Answer №1

Similar questions

Tips for incorporating jQuery val() into a span element!

Steps to display a JSX component stored in a variable

eslint warning: the use of '$localize' is flagged as an "Unsafe assignment of an `any` value"

Transfer a csv file from a static webpage to an S3 bucket

Encountered an error when attempting to load resource: net::ERR_CERT_AUTHORITY_INVALID following deployment on Vercel

Steps for importing jQuery to vendor.ts in Angular 2 webpack

Tips for adjusting the color of child elements when hovering over a card in Material UI

How can one gain access to a specifically generated element?

What steps do I need to take to include React in my background.js script for a chrome

Combine form data from a reactive form into a string using interpolation

Obtaining only a portion of the text when copying and editing it

How to prevent v-menu from overlapping a navbar in Vue.js

Replicating JavaScript functions with the power of Ajax

Can you help me figure out how to generate and output an input tag within a function?

How to set up Angular 5 with Express

The prop HandleClick is not being identified

The addClass and removeClass functions seem to be malfunctioning

Having difficulty customizing Mui Accordion with Styled Utility implementation

The toggle-input component I implemented in React is not providing the desired level of accessibility

Enhancing User Interfaces with JQuery UI Widgets and Dynamic AJAX Calls