Can't Dispatch Redux Action From Outside of Component (With Preloaded State)

Hello! I am having an issue where I am unable to dispatch actions from outside of a component. I have found many other people with this issue, but it seems that someone always submits an answer assuming that the “createStore” file always returns a store object:

• https://stackoverflow.com/questions/45043219/calling-dispatch-function-from-a-blank-javascript-file
• https://stackoverflow.com/questions/38460949/what-is-the-best-way-to-access-redux-store-outside-a-react-component
• https://stackoverflow.com/questions/56498212/dispatching-a-redux-thunk-action-outside-of-a-react-component-with-typescript

However, my createStore file looks like this:

import { composeWithDevTools } from 'redux-devtools-extension';
import combinedReducers from './reducers/root-reducer';
import { load, save } from 'redux-localstorage-simple';
import { createStore, applyMiddleware } from 'redux';
import todosCustomMiddleware from './middlewares/todosCustomMiddleware';
import loginCustomMiddleware from './middlewares/loginCustomMiddleware';
import socketManager from './middlewares/socketManager';
import { ILoginState } from './reducers/login';
import { ITodosState } from './reducers/todos';
export interface IState {
  loginReducer: ILoginState,
  todosReducer: ITodosState
}
export default (preloadedState: IState) => {
  return createStore(
    combinedReducers,
    getLoadedState(preloadedState),
    composeWithDevTools(
      applyMiddleware(
        save({ states: ['loginReducer'] }),
        todosCustomMiddleware(),
        loginCustomMiddleware(),
        socketManager()
      )
    ),
  );
};
const getLoadedState = (preloadedState: IState | any) => {
  if (typeof window !== 'undefined')
    return {
      ...preloadedState,
      ...load({ states: ['loginReducer'], disableWarnings: true }),
    }
  return {
    ...preloadedState,
  }
}

And so then when I try to import it and call “dispatch” like this:

import store from './../state/createStore'
store.dispatch(loginSuccess())

Then the event is never handled by my middlewares/reducers, and I also get this typescript error:

Property 'dispatch' does not exist on type '(preloadedState: IState) => Store<{ loginReducer: ILoginState; todosReducer: { fetching: boolean; error: undefined; todos: any; } | { fetching: boolean; error: any; todos: never[]; }; }, AnyAction> & { ...; }'.

Is there any way for me to dispatch actions from outside of a component when I am syncing the state with localstorage? Thanks!

[markerikson]

Two observations:

First, we try to keep this repo reserved for actual bugs, not usage questions.

Second, as I just answered on Twitter, your code is wrong.

Your store.js is returning a function (call it configureStore) that actually generates and returns the store instance.

However, your import statement is treating that return value as the store itself, which is incorrect.

So, the correct usage would be:

import configureStore from './../state/createStore'
const store = configureStore()

store.dispatch(someAction)

Also, note that our new official Redux Toolkit package will do much of that store setup logic for you, and I strongly recommend you try using it.

[markerikson]

The point of that “Support/Usage Questions” template entry is that users are supposed to read what it says and go to Stack Overflow or Reactiflux 😃

Redux Toolkit is an addon package that wraps the Redux core. Please read through the Redux Toolkit docs that I linked, including the tutorials.