Do you know redux-pages? I guess you don’t know, so I’d like to give a description. Briefly, the reason to use redux-pages is to keep our application state clean. Only we want to know from the state is “what page is rendered?”, and not the page path.
Paths don’t tell us what page should be rendered. In other words, paths tell us what page will/may be rendered. For example, suppose we visit a page `/cart/estimate` which shows an estimated shipment date and a cost of goods in a shopping cart. The date and cost may be calculated on server-side and the client should render a loading page until the estimation is given. As another example, some pages require authentication. When a guest user visits `/profile/edit`, the client may render an error page or redirect to a sign-up page.
We have many states in SPA development, server states, view states, and browser states. I think only the view states should be in my Redux state because I use Redux as a state store for rendering. the browser states such as a current URL make the state complex and less portable. Therefore, the state should not hold a current path.
In the way of redux-pages, an application state has a page identifier and parameters and no any URLs. A router component changes a page component with the identifier, and middlewares also reference the value. The URL is parsed only one time, and we can have routers in anywhere.
Let’s begin our small SPA. I’m going to give details about the website. Essentially, we have a big button to switch ‘on’ and ‘off’. The website shows “Do your tasks.” when ‘on’ and “Relax.” when ‘off’, and users must click the button “I finished one task.” at least once before switch to ‘off’ and relax.
DEMO: https://redux-pages-spa-example.netlify.com/on
Repository: https://gitlab.com/ryo33/redux-pages-spa-example
At first, I defined pages:
https://gitlab.com/ryo33/redux-pages-spa-example/blob/master/src/pages.js
The page objects will be used in middlewares, reducers, and the router.
Next, I prepare a reducer which stores a page state to render:
https://gitlab.com/ryo33/redux-pages-spa-example/blob/1bb4eb254075f2b680f240dd1d2c15ad22651a90/src/reducer.js#L7
Also, I wrote some boilerplate of redux-pages:
https://gitlab.com/ryo33/redux-pages-spa-example/blob/1bb4eb254075f2b680f240dd1d2c15ad22651a90/src/store.js#L8-27
Yeah! We did it! Now, we can use the page state in both of the router and middleware:
https://gitlab.com/ryo33/redux-pages-spa-example/blob/1bb4eb254075f2b680f240dd1d2c15ad22651a90/src/Router.js#L14-23
https://gitlab.com/ryo33/redux-pages-spa-example/blob/1bb4eb254075f2b680f240dd1d2c15ad22651a90/src/middleware.js#L8-24
In the example, parsing of URL is occurs one time although the page state is used in two place, router and middleware. In addition, who knows the URL format of paths is only the page object, and other only knows which page is active. I believe these factors keep routing of our application clear.
