Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where to set cookie in Isomorphic Redux Application?

I have 3 general questions about redux and isomorphic application:

  • What is the best way to share 'runtime' data between client and server? For instance, when the user logged in a distant API, I store the session object in cookies. In that way, next time the client requests my front-end, the front-end server can read the cookies and initialize the redux store with it's previous session. The downside of this is that the client HAS to validate/invalidate the session on boot (eg in componentDidMount of the root component). Should I request the session server side rather than read it from cookies?
  • Where should I execute the operation of cookie storing, in action creators or in reducers? Should I store the cookie in my reducer that handle the user session?
  • Where should I execute the operation of redirect the user (via react-router)? I mean when my user is successfully logged in, from where should I dispatch the redirect action (from the loginActionCreator once the login promise is resolved?, somewhere else? )

Thanks in advance.

like image 636
Cnode Avatar asked Jan 15 '16 23:01

Cnode


2 Answers

I managed to get a really neat app structure. Here's what I found for each questions:

  • I only share between my client and front-end server the API server token via cookies. Each time the client request the site. The front-end server calls the API server to validate the session. If these servers are on the same network it's really fast (< 5ms). I also prefetch some useful data for the client on the server before the initial render. I manage to get my application loaded and ready (javascript loaded) in the client in 600ms. It is pretty decent.

  • The action of storing the cookie is in my actions creators. As Ethan Clark said, we must keep reducers pure. It's much more easier to test.

  • I still dispatch the redirect in my signin creator once the user is authenticated. I guess it's easier to test than to dispatch the action after the promise resolution in component or elsewhere.

In fact, keeping this in mind allows us to have an app really easy to test (expect for the actions creator where you must have ton of spies).

Hope it will help someone.

Thanks for participating.

like image 200
Cnode Avatar answered Oct 05 '22 23:10

Cnode


Question 2: you should execute cookie storing in your action creator. Reducers must remain pure functions.

I'm really sorry that I don't know the answers to 1 & 3, but I hope that this helps!

like image 41
Ethan Clark Avatar answered Oct 05 '22 22:10

Ethan Clark