What happens to the redux store if I refresh the browser?
by Chen Jian
Posted on 2019-01-19 15:29 in Frontend
It will go away, and then be initialised.
If you have this question, it means you have no exact idea of the lifespan of client-side state in a browser.
First of all, a document is created under current tab of the browser when a url is first requested from the server side. The client-side state's lifespan is dependent on the lifespan of the document.
If your website is not an SPA, then clicking a link will lead to another http request for the server, and a new document instance is created. The client-side state will all disappear.
If your document is an SPA based on some router framework, e.g. react-router, and when you click a router-based link, no new http request will be sent, and the document remains the same one. How is this done? The onClick handlers of these links will first do e.preventDefault(), then call the History API such as history.pushState() to do same-document navigation.
How is this going to affect redux-store in an SPA site?
When you refresh the current page, a new document is created, the existing redux store will go away. After the new document is loaded, the redux store will be initialized according to your redux bootstrapping logic.
When you request a deep-link url directly in the browser, the same as above will happen.
When you click a router-based link, it will be a same-document navigation. The redux store will still be there.
When you click back/forward of the browser, then same as above will happen.
When you click a link that's not router-based, i.e., a primitive link, the browser will just request a new document from the server side, and the existing redux store will go away
For more details about navigation in an SPA and a non-SPA, read this great article: How Single-Page Applications Work