React 和 Redux 丢失状态

Question

Hope you all are fine. I am new to react redux world. I am learning and working on a call logging project. I have a few questions and it would great if someone can guide me whether I am doing it wrong or tell me the alternative.

I am using JWT to authenticate a user. Once the user details are verified. I am dispatching success action and in the reducer, I am setting the state to authenticated true and the response. I am also storing the token and expiryTime in localStorage

In the root file which is index file. I am checking if the token exists in localStorage and if so then dispatching sign in action.

Everything is working. But I am losing other values like a response from a server. When he logged in for the first time. How can I tackle this problem ?

Secondly, there is a User initial icon on the top right corner. I get the initial when a user logs in and it gets stored in auth state. it works fine but once again if I refresh the page it becomes null and I lose that initial.

so I tried another way and stored the initial in localStorage. But the navbar already rendered on the screen and I don't see any initial until I refresh the page.

I have passed new key in mapStateToProps. ii and stored initial from localStorage in it and it working fine. Is this a valid way of doing it ???

Regards Meet

            const  SignedInLinks  = (props) => {                                                      
            return (
                <ul  className="right">
                    <li><NavLink  to="/signin"  onClick=        
                    {props.signOut}>Log Out</NavLink></li>
                    <li><NavLink  className="btn btn-floating pink lighten-1"  to="/">
                    {props.ii  ?  props.ii  :  null  }
                    </NavLink></li>
            </ul>
            )}

            const  mapStateToProps  =  state  => {
                return {
                    auth:  state.auth,
                    ii:  window.localStorage.getItem('ui')
                }
            }
            export  default  connect(mapStateToProps, { signOut })(SignedInLinks);

Answer 1

Rather than using localStorage in mapStateToProps , intialize your ii state in your reducer corresponding to that state and then pass it to your component via mapStateToProps . Something like this.

const iiReducer = (state = window.localStorage.getItem('ui') || false, action) => {
  /*.
  .
  . Other Logic
  .
  .*/
  return state
}

and then use it normally as you would from a store's state

const  mapStateToProps  =  state  => {
    return {
        auth: state.auth,
        ii: state.ii
    }
}

Hope this helps !

Answer 2

I believe I have an idea of what the problem is (I'm kind of a beginner in react and redux aswell, so tell me if I'm speaking nonsense).

You say that you store the token in localstorage (it is recommended not to do that btw, the recommended way is to store it in a cookie), and if a valid token is found in localstorage, you log in. I'm guessing that you store the response from the server (including the icon) in the app's state, or in the redux store? If that is the case, this information will be removed when you update the browser (f5),therefore not being loaded anymore.

The solution is to make sure to load the relevant data when the component mounts, so in your componentDidMount method (if you don't have one, make one), and set the state in that method.