React-Redux useSelector typescript type for state [英] React-Redux useSelector typescript type for state

问题描述

我正在使用 React-Redux 中的 useSelector(state => state.SLICE_NAME) 钩子，但是我很难定义 state 参数.它默认设置为 unknown，因此当我尝试返回 state.SLICE_NAME 时出现错误(Error: Object is of type 'unknown'>).

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').

如何定义 state 类型而不必手动创建单独的状态类型并在创建时添加每个新的状态定义?

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?

我尝试将状态定义为 typeof store 但这不起作用.

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>
}

编辑:我注意到 configureStore() 的类型定义包含状态作为第一个泛型类型.请参阅下面的屏幕截图.如果我可以从 EnhancedStore 获得第一个通用值，那么我将能够使用它来定义状态.有什么办法可以在 Typescript 中做到这一点吗?

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?

推荐答案

这是来自 redux 文档:

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

与@Federkun 的答案相比，它的优势在于它更简单.与@alextastero 答案相比的优势在于，我不必手动指定 isLoggedIn 的类型.

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 useSelector typescript type for state的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！