title: Using Redux Toolkit, how do I access the store from a non-react file?
body: <p><strong>What am I trying to do?</strong></p>
  <p>Using Redux Toolkit, I'm trying to access the &quot;store&quot; for a value, specifically &quot;username&quot; which I've created a &quot;slice&quot; for, from a non-React file called <code>SomeFile.js</code>.</p>
  <p><strong>What is the code that currently tries to do that?</strong></p>
  <pre><code>// userMetadataSlice.js
  
  import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
  const initialState = {
    username: &quot;&quot;,
  };
  
  const userMetadataSlice = createSlice({
    name: &quot;userMetadata&quot;,
    initialState,
    reducers: {
      updateUsername: (state, action) =&gt; {
        const username = action.payload;
        state.username = username;
      },
    },
  });
  
  export const { updateUsername } = userMetadataSlice.actions;
  
  export default userMetadataSlice.reducer;
  
  export const selectUsername = (state) =&gt; {
    return state.userMetadata.username;
  }
  </code></pre>
  <pre><code>// SomeFile.js
  
  import { selectUsername } from &quot;../redux/userMetadataSlice&quot;;
  import { useSelector } from &quot;react-redux&quot;;
  
  export const displayUsername = () =&gt; {
    const username = useSelector(selectUsername);
    console.log(&quot;Username:&quot;, username); // Error.
  }
  </code></pre>
  <p><strong>What do I expect the result to be?</strong></p>
  <p>To be able to pull the username from the &quot;store&quot;.</p>
  <p><strong>What is the actual result?</strong></p>
  <p>When I try to access the value via &quot;useSelector&quot; from the non-react file an error occurs: <code>React Hook &quot;useSelector&quot; is called in function &quot;selectUsername&quot; which is neither a React function component or a custom React Hook function</code></p>
  <p><strong>What I think the problem could be?</strong></p>
  <p><code>SomeFile.js</code> does not have anything React related within it because it just pulls data from the store and outputs the data.</p>
  <p>A solution I've tried that worked was to do this:</p>
  <pre><code>// userMetadataSlice.js
  
  import { createSlice } from &quot;@reduxjs/toolkit&quot;;
  
  const initialState = {
    username: &quot;&quot;,
  };
  
  const userMetadataSlice = createSlice({
    name: &quot;userMetadata&quot;,
    initialState,
    reducers: {
      updateUsername: (state, action) =&gt; {
        const username = action.payload;
        state.username = username;
      },
    },
  });
  
  export const { updateUsername } = userMetadataSlice.actions;
  
  export default userMetadataSlice.reducer;
  
  export const selectUsername = (state) =&gt; {
    return state.userMetadata.username;
  }
  
  // New code here!
  
  export function SelectUsername() {
    const username = useSelector(selectUsername);
    return username;
  }
  </code></pre>
  <pre><code>// SomeFile.js
  
  import { SelectUsername } from &quot;../redux/userMetadataSlice&quot;;
  
  export const displayUsername = () =&gt; {
    console.log(&quot;Username:&quot;, SelectUsername); // No errors, shows correct output.
  }
  </code></pre>
  <p>The solutions I'm looking for is this:</p>
  <ol>
  <li>Is my proposed solution the &quot;proper&quot; way to receive info from the &quot;store&quot; in non-React files?</li>
  <li>Is there a custom hook solution for this?</li>
  </ol>