Why use "this.props.dispatch" rather than "store.dispatch" directly in Redux?

Question

Is there any detriment to directly using store.dispatch?

It seems to me it's much easier to call (since it's available to all child components) and in my testing so far, I've yet to find a difference.

Thanks!

Answer 1

In universal apps, you'll want a different store instance on every request. If you just export store as a singleton from some module, you'll have a hard time adding server rendering.

This is why we never encourage singleton store in the docs, and always encourage you to use <Provider> to pass it down the hierarchy via React context. This makes store available to the consuming components without making it a singleton.

As for why connect() from React Redux passes dispatch as a prop instead of store itself—it's because you don't really need store itself in the connected components. Subscription and reading state is done by connect() so you'll only ever need dispatch() in components.

Answer 2

Usually I find that the store is initialized in a top level module, and then used in lower level modules by the react-redux connect function.

This prevents the need to import the store directly in a lower level module, as it would be importing from the top level.