title: React-Redux useSelector typescript type for state
body: <p>I'm using the <code>useSelector(state =&gt; state.SLICE_NAME)</code> hook from React-Redux however I'm having difficulty defining the <code>state</code> parameter. It is set by default as <code>unknown</code> so I get an error when I try to return <code>state.SLICE_NAME</code> (<code>Error: Object is of type 'unknown'</code>).</p>
  
  <p>How do I define the <code>state</code> type without having to manually create a separate state type and adding in every new state definition as they're created?</p>
  
  <p>I've tried defining state as <code>typeof store</code> however that doesn't work.</p>
  
  <p>Some code to help explain:</p>
  
  <pre><code>// 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) =&gt; {
        state.open = true;
      },
      close: (state: NavDrawerInitialState) =&gt; {
        state.open = false;
      }
    }
  });
  
  export const navDrawerActions = actions;
  export default reducer;
  </code></pre>
  
  <pre><code>// reducers.ts
  
  import navDrawer from "./navDrawer";
  
  const reducers = {
    navDrawer
  };
  
  export default reducers;
  </code></pre>
  
  <pre><code>// store.ts
  
  import { configureStore } from "redux-starter-kit";
  import reducer from "./reducers";
  
  const store = configureStore({
    reducer
  });
  
  export default store;
  </code></pre>
  
  <pre><code>// Page.tsx
  
  import React, { FC } from "react";
  import { Provider } from "react-redux";
  import store from "./store";
  import ChildComponent from "./ChildComponent";
  
  const StateProvider: FC = () =&gt; {
    return &lt;Provider store={store}&gt;&lt;ChildComponent /&gt;&lt;/Provider&gt;;
  };
  
  export default StateProvider;
  </code></pre>
  
  <pre><code>// ChildComponent.tsx
  
  import React, { FC } from "react";
  import { useSelector } from "react-redux";
  
  const ChildComponent: FC = () =&gt; {
    const navDrawerState = useSelector(state =&gt; state.navDrawer); // ERROR OCCURS HERE. "state" is defined as 'unknown' so "state.navDrawer" throws an error.
    return &lt;div&gt;Text&lt;/div&gt;
  }
  </code></pre>
  
  <p><strong>Edit</strong>: I noticed that the type definition for <code>configureStore()</code> contains the state as the first generic type. See screenshot below. If I can get the first generic value from <code>EnhancedStore</code> then I'll be able to use that to define state. Is there any way I can do this in Typescript?</p>
  
  <p><a href="https://i.stack.imgur.com/6uVzf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6uVzf.png" alt="enter image description here"></a></p>