React-Redux useSelector typescript type for state

Related searches

I'm using the useSelector(state => state.SLICE_NAME) hook from React-Redux however I'm having difficulty defining the state parameter. It is set by default as unknown so I get an error when I try to return state.SLICE_NAME (Error: Object is of type 'unknown').

How do I define the state type without having to manually create a separate state type and adding in every new state definition as they're created?

I've tried defining state as typeof store however that doesn't work.

Some code to help explain:

// navDrawer.ts

import { createSlice } from "redux-starter-kit";

// navDrawer initial state
export interface NavDrawerInitialState {
  open: boolean;
}

const navDrawerInitialState: NavDrawerInitialState = {
  open: false
};

// Create state slice
const { actions, reducer } = createSlice({
  slice: "navDrawer",
  initialState: navDrawerInitialState,
  reducers: {
    open: (state: NavDrawerInitialState) => {
      state.open = true;
    },
    close: (state: NavDrawerInitialState) => {
      state.open = false;
    }
  }
});

export const navDrawerActions = actions;
export default reducer;
// reducers.ts

import navDrawer from "./navDrawer";

const reducers = {
  navDrawer
};

export default reducers;
// store.ts

import { configureStore } from "redux-starter-kit";
import reducer from "./reducers";

const store = configureStore({
  reducer
});

export default store;
// Page.tsx

import React, { FC } from "react";
import { Provider } from "react-redux";
import store from "./store";
import ChildComponent from "./ChildComponent";

const StateProvider: FC = () => {
  return <Provider store={store}><ChildComponent /></Provider>;
};

export default StateProvider;
// ChildComponent.tsx

import React, { FC } from "react";
import { useSelector } from "react-redux";

const ChildComponent: FC = () => {
  const navDrawerState = useSelector(state => state.navDrawer); // ERROR OCCURS HERE. "state" is defined as 'unknown' so "state.navDrawer" throws an error.
  return <div>Text</div>
}

Edit: I noticed that the type definition for configureStore() contains the state as the first generic type. See screenshot below. If I can get the first generic value from EnhancedStore then I'll be able to use that to define state. Is there any way I can do this in Typescript?


You can create your custom typed useSelector like so:

import {
  useSelector as useReduxSelector,
  TypedUseSelectorHook,
} from 'react-redux'
import { RootState } from 'app/redux/store'

export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector

where RootState is the type of the store, usually defined as:

export type RootState = ReturnType<typeof rootReducer>

This is the method described in the definitely typed declaration.

Don't forget to install @types/react-redux.

Static Typing � React Redux, If you are using Typescript you should install the @types/react-redux type the state type declaration, you can define a typed useSelector hook� React-Redux is currently written in plain JavaScript. However, it works well with static type systems such as TypeScript and Flow. TypeScript. React-Redux doesn't ship with its own type definitions. If you are using Typescript you should install the @types/react-redux type definitions from npm. In addition to typing the library functions, the types also export some helpers to make it easier to write typesafe interfaces between your Redux store and your React components.


This might not be the answer but I use it like so:

const isLoggedIn = useSelector<IRootState, boolean>(state => state.user.loggedIn);

React-Redux useSelector typescript type for state, This might not be the answer but I use it like so: const isLoggedIn = useSelector< IRootState, boolean>(state => state.user.loggedIn);. #Usage with React Redux. While React Redux is a separate library from Redux itself, it is commonly used with React. For a complete guide on how to correctly use React-Redux with TypeScript, see the "Static Typing" page in the React-Redux docs. This section will highlight the standard patterns. React-Redux doesn't ship with its own type definitions.


Here is the suggestion (more or less) from the redux docs:

import { RootState } from 'app/redux/store';
const isLoggedIn = useSelector(state: RootState => state.user.loggedIn);

The advantage over @Federkun's answer is that it is much simpler. The advantage over @alextrastero's answer is that I don't have to specify isLoggedIn's type manually.

React-Redux Hooks with Typescript in 2020 -, yarn add react-redux @types/react-redux redux. Create two files UseSelector to assign name and address state const {name, address}� reacttypescript. Reduxis a popular library used to manage state in React apps. In this post, we’ll use Redux to manage some state in an app in a strongly-typed fashion with TypeScript. We’ll use the hooksapproach to interact with the Redux store from a React component. State.


However, we're going to want to know what the TypeScript type is for that root state object, because we need to declare what the type of the state variable is whenever our code needs to access the Redux store state (such as in mapState functions, useSelector selectors, and getState in thunks).


When a react context updates, all components that use that context also update. This would cause huge performance issues if all components with react-redux’s useSelector re-rendered each time any…


Use a static type system like TypeScript or Flow rather than plain JavaScript. The type systems will catch many common mistakes, improve the documentation of your code, and ultimately lead to better long-term maintainability. While Redux and React-Redux were originally designed with plain JS in mind, both work well with TS and Flow.