React Redux state is lost at page refresh

Question

in my react app I have 3 components. from the 1st component by a button, I use Link to go to the 2nd component. at the 2nd I create a state (redux store), manipulate it and when manipulation is finished by submitting button I redirect to the 3rd component. at the 3rd component, I also see the state (by redux chrome tool) but here when I refresh the page (the webpack thing when a code is changed and saved), I lose the sate and get an empty Object.

this is the structure of my app.

index.js

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <Route component={App} />
    </Provider>
  </BrowserRouter>,
  document.getElementById("root")
);

App.js

const App = ({ location }) => (
  <Container>
    <Route location={location} path="/" exact component={HomePage} />
    <Route location={location} path="/GameInit" exact component={GameInit} />
    <Route location={location} path="/Battle" exact component={Battle} />
  </Container>
);

App.propTypes = {
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired
  }).isRequired
};

export default App;

Here at HomePage, I have a button that links to GameInit

const HomePage = () => (<Button color="blue" as={Link} to="/GameInit">START GAME</Button>);
export default HomePage;

and the GameInit Page looks like

class GameInit extends Component {
  componentWillMount() {
    const { createNewPlayer} = this.props;
    createNewPlayer();
  }
/* state manipulation till it gets valid */
 palyerIsReady()=>{ history.push("/Battle");}

export default connect(mapStateToProps,{ createNewPlayer})(GameInit);

and finally Battle component where I first see the state but lose on refresh

class Battle extends Component {
  render() {return (/*some stuff*/);}}

Battle.propTypes = {
  players: PropTypes.object.isRequired // eslint-disable-line
};
const mapStateToProps = state => ({
  players: state.players
});
export default connect(mapStateToProps,null)(Battle);

isn't Thunk here as middleware to handle this? if I want to persist everything in local storage, why should I even use redux? — Amir-Mousavi, Sep 04 '18 at 07:42
Prepare initial state and pass it via createStore(combined, { a: 'horse' }). https://redux.js.org/recipes/structuringreducers/initializingstate. From my perspective this is reason — Michal Cholewiński, Sep 04 '18 at 07:56
Possible duplicate of [How can I persist redux state tree on refresh?](https://stackoverflow.com/questions/37195590/how-can-i-persist-redux-state-tree-on-refresh) — Michael Freidgeim, Aug 27 '19 at 13:54
Pass this [redux-persis](https://github.com/rt2zz/redux-persist) step by step. — NinjaDev, Sep 16 '20 at 10:34

Alexandre Annic · Accepted Answer · 2019-12-26T09:58:31.660

22

You can easily persist it in the localstorage. Check the example below.

const loadState = () => {
  try {
    const serializedState = localStorage.getItem('state');
    if(serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (e) {
    return undefined;
  }
};

const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
  } catch (e) {
    // Ignore write errors;
  }
};

const peristedState = loadState();

store.subscribe(() => {
  saveState(store.getState());
});

const store = createStore(
  persistedState,
  // Others reducers...
);

render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root');
);

Serialization is an expensive operation. You should use a throttle function (like the one implemented by lodash) to limit the number of saves.

Eg:

import throttle from 'lodash/throttle';

store.subscribe(throttle(() => {
  saveState(store.getState());
}, 1000));

edited Dec 26 '19 at 09:58

answered Sep 04 '18 at 07:52

Alexandre Annic

7,089
3
28
40

This looks very convincing. so there is no need for thunk anymore? – Amir-Mousavi Sep 04 '18 at 09:36
and for seeing the state at chrome extention I should write composeWithDevTools(persistedState) ? – Amir-Mousavi Sep 04 '18 at 09:37
It doesn't change anything from your existing code. The second argument of `createStore` is simply the initialState. You still can add thunk and plug the chrome extension. – Alexandre Annic Sep 04 '18 at 09:44
persistedState, should be placed as the enhancer? something like? createStore( rootReducer, composeWithDevTools(applyMiddleware(thunk)), persistedState ); – Amir-Mousavi Sep 04 '18 at 09:57
1

Aha, I got it, Thanks a lot. best solution for my case :) – Amir-Mousavi Sep 04 '18 at 09:59
Where is store.subscribe from? I am getting "Uncaught TypeError: Cannot read property 'subscribe' of undefined" – Temi 'Topsy' Bello Apr 24 '19 at 15:22
1

@Temi'Topsy'Bello I think there is an error in the code, you should write `store.subscribe(...)` after `store` declaration. – Alexandre Annic Apr 24 '19 at 15:54

score 4 · Answer 2 · answered Sep 04 '18 at 07:44

4

You can use something like redux-persist to save the redux state to local storage or to another storage system.

answered Sep 04 '18 at 07:44

illiteratewriter

3,204
1
16
35

score 1 · Answer 3 · answered Sep 04 '18 at 08:29

My personal advice for hot reloading is using this: React hot loader, this prevents page reload and only switch out the altered chunk. This implies that your state never gets lost while devving.

It is pretty easy to install. You only have to add an entry and wrap your initial component in hot which you can get from the package.

If you need more information on how it works i suggest watching this talk by the creator.

score 0 · Answer 4 · answered Feb 07 '20 at 06:36

    import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import { store } from "./rootReducer";
import { BrowserRouter } from "react-router-dom";

if (process.env.NODE_ENV === "development" && module.hot) {
  module.hot.accept("./rootReducer", () => {
    const newRootReducer = require("./rootReducer").default;
    store.replaceReducer(newRootReducer);
  });
}

export type AppDispatch = typeof store.dispatch;

const render = () => {
  const App = require("./App").default;
  ReactDOM.render(
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>,
    document.getElementById("root"),
  );
};

render();

if (process.env.NODE_ENV === "development" && module.hot) {
  module.hot.accept("./App", render);
}

Hassan Ali Shahzad · Answer 5 · 2021-02-16T05:23:07.963

Alexender Annic Answer in correct way:

// persist store code
const loadState = () => {
  try {
    const serializedState = localStorage.getItem('state');
    if(serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (e) {
    return undefined;
  }
};

const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
  } catch (e) {
    // Ignore write errors;
  }
};

const persistedState = loadState();

// This persistedState is includedat the time of store creation as initial value
const store = createStore(reducers, persistedState);

// This is actually call every time when store saved
store.subscribe(() => {
  saveState(store.getState());
});


export default store;

React Redux state is lost at page refresh

5 Answers5