11

I have a page in my application that is an interactive chart with a bunch of settings (filters, time ranges, etc). I'd like to store them in-app state because some of the settings may be used by other components on another page, but right now if I click on any other tab and come back to the previous tab then the page shows the initial state(chart is gone, filtered data gone, date range showing the default value, dropdowns shows default ass well). And the state is also showing null.

Sabito stands with Ukraine
  • 4,271
  • 8
  • 34
  • 56
Khal Drogo
  • 113
  • 1
  • 1
  • 6
  • 2
    https://redux.js.org/introduction – Joe Warner Mar 20 '18 at 12:27
  • 1
    Welcome to StackOverflow. Please take the [tour](http://stackoverflow.com/tour) have a look around, and read through the [HELP center](http://stackoverflow.com/help), then read [How to Ask Question](http://stackoverflow.com/help/how-to-ask), [What types of questions should I avoid asking?](http://stackoverflow.com/help/dont-ask) and provide a [MCVE : Minimal, Complete, and Verifiable Example](http://stackoverflow.com/help/mcve). If people around can easily read and understand what you mean, or what the problem is, they'll be more likely willing to help :) – Dwhitz Mar 20 '18 at 12:28
  • `localStorage` is a good way to store a persistent state. Move the state up to your highest componenent and reflect it to localStorage – Jonas Wilms Mar 20 '18 at 12:42
  • We'd love to help, let's see what you've tried so far? – Matt Rowles Mar 20 '18 at 22:58

5 Answers5

18

Anything in your component state is dynamic; i.e., it is temporary. If you refresh the window, the old state is lost. A similar thing happens when you open a fresh tab—you get the state declared in your constructor. You can use any of the following if you want the state data in another tab:

  1. Simply using redux won't solve your problem as redux store is also related to a specific browser tab. If you would like to persist your redux state across a browser refresh, it's best to do this using redux middleware. Check out the redux-persist, redux-storage middleware.

  2. If you are using react-router you can simply pass required state through the link when you open a fresh tab. Here's an example:

<Link to={{ 
  pathname: '/pathname', 
  state: { message: 'hello, im a passed message!' } 
}}/>
  1. Simply store the data in localStorage and access localStorage in other tabs.
Nathan Arthur
  • 8,287
  • 7
  • 55
  • 80
Ayesha Mundu
  • 1,075
  • 2
  • 11
  • 18
4

If you are looking to use a variable across the entire application you can also use localStorage 

localStorage.setItem('move', this.state.move);

also don't forget to unset it when you are done! 

localStorage.removeItem('move');
Tyler young
  • 93
  • 8
1

The straight forward solution to this is redux-state-sync. It will just work and the store will be updated on all tabs and even windows on the browser.

BernardA
  • 1,391
  • 19
  • 48
-1

I think you should implement react-redux into your app. React-redux is a state management tool that manage the state of your application at a centralized location and you access data from store at anytime from anywhere. React-redux: https://redux.js.org/basics/usage-with-react

Pinki Gupta
  • 14
  • 3
-7

You some library for state management. The most popular one that's used with React is redux.

https://redux.js.org/introduction

Bojan Ivanac
  • 1,170
  • 8
  • 17
  • 8
    Redux is not shared across multiple tabs. – Joel Bourbonnais Apr 27 '20 at 16:39
  • You'll probably need to use sessions on the back-end, right?! I read somewhere that the browser limits what you can do with pure Javascript, in terms of external resources like other tabs, files, etc... (of course the local storage is one option) –  Jul 15 '20 at 15:12
  • 4
    Downvoted, because it does not answers the question. Redux does not synchronize between tabs, as was requested. – Jaromír Adamec Aug 10 '20 at 20:21