#createBrowserRouter - loaders are loading before I have time to rehydrate redux state

1 messages · Page 1 of 1 (latest)

cursive star
#

Hi Guys, I'm using createBrowserRouter, however i'm having some issues with the loaders. In one of the loaders, I require a refresh token that I'm storing with redux. This is fine and all, however I'm using redux-persist, and it means that even after using a PersistGate component to rehydrate my redux state, the loaders in the createBrowserRouter have already loaded, meaning the states are null. What can I do about this?

<Provider store={store}>
<PersistGate
onBeforeLift={async () => {
await delay(5000)
}}
persistor={persistor}
loading={null}>
<RouterProvider router={router}/> //the createBrowserRouter
</PersistGate>
</Provider>

#

basically how can I perform a rehydrate before the loaders with redux?

cursive star
crimson anvil
#

if you're using redux with Remix you're probably doing something wrong. there is absolutely no need for redux inside of remix

cursive star
#

i'm new to both

#

refresh token stored in a store > access it, so i can authenticate a request in loader

crimson anvil
#

you can store that information in cookies instead, I made a video on how you can handle that, but redux store, especially the one with persist is made for the client, your loaders run on the server so you can't use both, plus if you fetch stuff in loaders there is no need for request authentication on the client

#

here's the video

cursive star
#

thanks Alem, I'll take a look

crimson anvil
#

no worries, if you have questions shoot! let's make that pepe happy

round sundial
#

I agree that in most case you don't need something like Redux when using loaders/actions because RR is your state management system under the hood - and data is available via useLoaderData/useRouteLoaderData/useMatches.

However, you can use an external state management system with RR, so long as you understand the decoupled nature of etching and rendering in RR 6.4+. You would want to read from the store in loaders and write to the store in actions.

I'd recommend checking out this video (https://www.youtube.com/watch?v=95B8mnhzoCM) and this post (https://remix.run/blog/remixing-react-router) to get an idea of why these are decoupled in RouterProvider apps.

For those reasons, your Provider/PersistGate approach will be problematic because the rendering doesn't happen until after data fetching.

However, you are free to use a store and access it via loaders and mutate it in actions etc.

I think in your specific case, you just want top hydrate the store before calling createBrowserRouter (which runs the loaders):

let store = hydrateStore();
// Route loaders/actions can access the store
let routes = createRoutes(store)
let router = createBrowserRouter(routes)

createRoot(el).render(
  <RouterProvider router={router} />
);
cursive star
#

thanks for the information - understand what I need to do now 🙂