React/Redux: Global function that can dispatch actions?

Question

I am looking to implement a React/Redux function as a global utility that has the ability to dispatch actions.

This is not a Component/Container. Simply a global/static function that can be imported and invoked by others.

Is this possible?

Thank you in advance for any ideas/suggestions you can provide!

Answer 1

The dispatch comes from the Store so you just need a global reference to your Store.

So suppose your application root looks something like this:

const store = createStore(rootReducer);

ReactDOM.render(<Provider store={store} /> ...);

Just export that store:

export const store = createStore(root);

And from your static util import the store:

import {store} from "../path/to/app/root";

store.dispatch({ ... });

---

A better way to do this would be to make your util function accept dispatch as an argument, this way you have no global references to store.

Answer 2

I'm old school; in app.js I would just do:

window.store = store

That's it - store exposed globally, no need to import etc. This will break server side rendering, but that breaks if you use a global dispatch in any case. See this twitter thread: https://twitter.com/Grynn/status/955485816389685248

Quoting reply from Dan Abramov (in above thread):

Makes testing harder, breaks if there are several such apps in the page (which happens in practice in big products), makes server rendering impossible. Otherwise it's fine sure