如何在没有 Redux 的情况下在本地存储 React 中持久化状态？

Question

I'm building a web app in React connected to Firebase, which authenticates users and stores post data. There seems to be a lot of documentation online about using Redux, but not a whole lot on persisting state without it.

When a user refreshes a page, the <App /> 's State is reset, so I need to preserve the existing state/retrieve it from Firebase. Some articles suggest using local storage to store state. But with best practices in mind, what should be stored in local storage? My app stores all it's state in <App /> , and passes down needed state as props to relevant components.

The following two examples assume a user has authenticated already and has just refreshed their page. We want their session to be preserved, so do we:

Example #1:

• App loads and checks local storage for a stringified object of the last stored local state. Sets the state to either that or empty state.
• If 'state' is retrieved and set, use this.state['uid'] to sync state with Firebase (fetching), then update local storage state again.
• Whenever a user updates something, update the state (which updates Firebase) and also update the local storage state.
• When user logs out, clear the local storage 'state' item.

Example #2:

• App loads and checks local storage for a uid (which is set during authentication), if one is found, uses that to sync state with firebase (fetch).
• If a user reloads a page, data is fetched again from Firebase.
• When user logs out, clear the local storage 'uid' item.

With the first example, I'm effectively keeping two copies of the state. One in React's State , and another in the browser's Local Storage. In case the user closes the window or refreshes the page.

My question is: Which is the best practice?

or, is building a React app that needs to persist user and state across different routes without Redux totally bonkers?

Learning React is enough of a curve without Redux, so I'm trying to see if I can manage without it.

Answer 1

In your use case, redux is not gonna help you because redux's state also resets when user refreshes the page. If you want to keep the state of your app on refresh/browser termination, then you need to use localStorage/sessionStorage/cookies etc.

Which is best way?

Well I would say that the second approach is better. I would avoid keeping copy of state in localstorage. I would only keep some kind of token/id (in your case uid ) which uniquely identify the user and would fetch fresh data every time. When your application grows it can be hard to manage those states in localstorage.

Answer 2

I`m using the library Master-hook and its quite simple to use global state without Redux:

Then you create 'src/hooks.js' file:

import MasterHook from 'master-hook'

export const useMyHook = MasterHook({
  storage: "myStorage",
  initialState: {
    myName: 'Vanda',
  },
  cache: {
    myName: 10000,
  }
})

You set the initial State (initialState:...) Set how long the value need has to stay cached in ms (cache:...). The timer starts when you put a value in initialState and its lifetime in the value in ms. Even when you reload your page - the value will save in a Global state and you don`t have to use Redux, react-redux, redux-thunk, reselect are already installed in the library Master-hook.

The more information on how to use Master-hook you can find here