title: how to dispatch action outside component in Redux-Toolkit + typescript?
body: <p>I have axis interceptor and I have in a store Error reducer. How to dispatch correctly action outside component ?</p>
  <p>I tried store.dispatch, I don't know why but it crashes my whole store and my whole app is falling apart. I tried useAppDispatch, but get error can't use it outside component. Code below:</p>
  <pre><code>import axios from &quot;axios&quot;;
  import store from &quot;../store/store&quot;;
  import { addError } from &quot;../store/errorSlice/errorSlice&quot;;
  
  const instance = axios.create({
      timeout: 1000,
      withCredentials: true,
      baseURL: &quot;http://localhost:8000&quot;
  })
  
  instance.interceptors.response.use(response =&gt; response,
     function (error) {
          console.log(&quot;ERROR FROM SERVER&quot;);
          const { data, status } = error.response;
          const { message } = data;
  
          store.dispatch(addError({ message, status, active: true })) // crashes my whole app. It looks like triggering an action, but then delete all reducers
          return ;
  })
  
  export default instance;
  </code></pre>
  <p>here is my ErrorSlice.ts</p>
  <pre><code>import { createSlice, PayloadAction } from &quot;@reduxjs/toolkit&quot;;
  import IError from &quot;../../models/error&quot;;
  
  const initialState: IError = {
      message: &quot;&quot;,
      status: 400,
      active: false
  }
  
  const ErrorSlice = createSlice({
      name: &quot;Error&quot;,
      initialState,
      reducers: {
          addError: (_, action: PayloadAction&lt;IError&gt;) =&gt; action.payload,
          deleteError: (_) =&gt; {
              return { 
                  message: &quot;&quot;,
                  status: 400,
                  active: false } as IError   }
      }
  })
  
  export default ErrorSlice.reducer;
  export const { addError, deleteError } = ErrorSlice.actions;
  </code></pre>