Proper way of accessing Redux store (or any other data source) in loaders?

[doksara]

As the question says: What is the proper way of accessing Redux store in RR6 loader? For example, I want to access user token, make a fetch request using it, and then possibly redirect to other route based on response?

[sergiodxa]

Import the store and call store.getState()

[doksara]

Really? It's kinda weird that my is literally wrapped with store like this:

<Provider store={store}>
    <RouterProvider router={router}>
</Provider>

and yet I'm unable to use the SAME store inside the RouterProvider / loader other than importing it globally 🤯

[sergiodxa]

That Provider is to let your React components access your Redux store, but loaders and actions run outside React, so you can just import the store and call the getState method to get the current state at that moment, or call store.dispatch() to dispatch actions if you need to.

[doksara]

@sergiodxa Alright then, thank you very much!

[JimmayVV]

thanks for the thoughtful response! Helps put my mind at ease - I've been worried about causing circular dependencies with importing the store directly, so I appreciate the vote of confidence in utilizing such a pattern.

[vanekj]

I would like to point out that in case of SSR this would not work as you don't want to work with global store like this and use the one created for the current request context instead (from the Provider).

[pepperav]

That Provider is to let your React components access your Redux store, but loaders and actions run outside React, so you can just import the store and call the getState method to get the current state at that moment, or call store.dispatch() to dispatch actions if you need to.

Genius!