on refresh the state value is lost in react.js

Question

I am getting an state value i.e loggedIn user name then printing loggedIn user name on my page. But when I refresh my page then the state value is lost.

I am creating state value using redux.

This is my action.js -

// Login - get user token
export const loginUser = userData => dispatch => {
  axios
    .post("http://localhost:5000/login", userData)
    .then(res => {
      // Save to localStorage
      // Set token to localStorage
      const { token } = res.data;
      localStorage.setItem("usertoken", token);
      // Set token to Auth header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      // Set current user
      dispatch(setCurrentUser(decoded));
    })
    .catch(err => {
      return err;
    }

    );
};
// Set logged in user
export const setCurrentUser = decoded => {
  return {
    type: SET_CURRENT_USER,
    payload: decoded
  };
};
// User loading
export const setUserLoading = () => {
  return {
    type: USER_LOADING
  };
};
// Log user out
export const logoutUser = () => dispatch => {
  // Remove token from local storage
  localStorage.removeItem("usertoken");
  // Remove auth header for future requests
  setAuthToken(false);
  // Set current user to empty object {} which will set isAuthenticated to false
  dispatch(setCurrentUser({}));
};

this is my reducer.js -

import {
  SET_CURRENT_USER,
  USER_LOADING
} from "../Actions/actions";
const isEmpty = require("is-empty");
const initialState = {
  isAuthenticated: false,
  user: {},
  loading: false
};
export default function (state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        ...state,
        isAuthenticated: !isEmpty(action.payload),
        user: action.payload
      };
    case USER_LOADING:
      return {
        ...state,
        loading: true
      };
    default:
      return state;
  }
}

and in header.js I am printing loggedIn user name.

const userLink = () => (
      <div className="" style={{ display: "inline-flex" }}>
        <li class="nav-item">
          <Link className="nav-link" to="/">
            {user.name}
          </Link>
        </li>
        <li class="nav-item">
          <a href="" onClick={this.logOut.bind(this)} className="nav-link">
            Logout
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/">
            AboutUs
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/">
            ContactUs
          </a>
        </li>
      </div>
    );

I am getting loggedIn user name in state. but hen I am refreshing the page the state value of loggedIn user name is lost. One more thing I am including Header.js file in all pages of my react Application.

How can I save my state value of loggedIn user from any losses if I refresh the page ?

As you are already using localStorage, how you are storing localStorage value in state? — ravibagul91
– ravibagul91, Commented Sep 3, 2019 at 5:25

Code-Apprentice · Accepted Answer · 2019-09-03 15:42:18Z

6

when I refresh my page then the state value is lost

This is how React and Redux state work. They are only stored in memory while the page is loaded. It looks like you are already storing the token in local storage, which is the correct way to store data more permanently. The problem is that you never fetch the value back from local storage when your page loads. You should check if the token exists in local storage. If it does, then just fetch it. If it doesn't then redirect to the login screen.

edited Sep 3, 2019 at 15:42

answered Sep 3, 2019 at 5:21

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Meisam Nazari · Accepted Answer · 2019-09-03 14:34:02Z

Two common stores of react apps are components internal state and redux. Parameters which are defined as state can not be accessed when that component is unmounted. So when you route from a page or refresh that you lose your state. But if you set a parameter in redux store you can access that parameter in whole of your app. In this case if you refresh your page you lose your redux store by routing from one page to other you still can access your store. So if you want to have a parameter in your store:

First set that in redux store and second save that in localStorage of browser. For saving and getting and removing parameters from localStorage you can refer to this link: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

But a proper way is using redux-persist library and puting your parameters in its white-list. you can read more about it here: https://github.com/rt2zz/redux-persist

I hope it would be helpful. If it is please vote me up:)

Aashish Karki · Accepted Answer · 2019-09-03 06:27:39Z

2

you may have to use permanent storage, such as localstorage and hydrate the redux again with it, set the redux value as

  localstorage.setItem('user', JSON.stringify(state));

retrive it as

  const reduxState = localstorage.getItem('user');
  JSON.parse(reduxState)

answered Sep 3, 2019 at 6:27

Aashish Karki

3562 silver badges7 bronze badges

Comments

K41F4r · Accepted Answer · 2019-09-03 06:10:25Z

1

When you refresh the page you need to check for the value you have stored in localStorage and load the user again (SET_CURRENT_USER dispatch). You might be already doing that but thought it was worth mentioning since I haven't seen this in the code you posted.

answered Sep 3, 2019 at 6:10

K41F4r

1,5592 gold badges17 silver badges41 bronze badges

Comments

Roopak Puthenveettil · Accepted Answer · 2019-09-03 06:59:06Z

0

Redux Persist must be apt for your situation. Redux persist is a library allowing to save the redux store in the local storage of your browser.

Redux Persist

answered Sep 3, 2019 at 6:59

Roopak Puthenveettil

1,5052 gold badges14 silver badges28 bronze badges

Collectives™ on Stack Overflow

on refresh the state value is lost in react.js

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related