title: React redux- lost state after page refresh
body: <p>i'm working on a project where there's an authentication, and i'm storing user infos after registration using redux store. I've made a test on the header component(if there's a user then logout will be displayed, else an avatar will be displayed), the probleme that i could dispatch new user information to the store, but when i refresh the page, i lose store state(goes back to null)
  My userSlice code:</p>
  <pre><code>import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
  import { fetchCount } from './counterAPI';
  
  const initialState = {
    value: 0,
    status: 'idle',
  };
  
  export const incrementAsync = createAsyncThunk(
    'counter/fetchCount',
    async (amount) =&gt; {
      const response = await fetchCount(amount);
      // The value we return becomes the `fulfilled` action payload
      return response.data;
    }
  );
  
  export const userSlice = createSlice({
    name: 'user',
    initialState: {
      user:null,
    },
    reducers: {
      login: (state, action) =&gt; {
        state.user = action.payload;
      },
      logout: (state) =&gt; {
        state.user = null;
      },
    },
  });
  
  export const { login, logout} = userSlice.actions;
  
  export const selectUser = (state) =&gt; state.user.user;
  
  
  export default userSlice.reducer;
  </code></pre>
  <p>My register component:</p>
  <pre><code>import React, {useState} from 'react'
  import '../../styles/auth/register.css'
  import Footer from '../Footer.jsx';
  import {Link} from 'react-router-dom'
  import axios from 'axios'
  import {useHistory} from 'react-router-dom'
  import {useSelector, useDispatch} from 'react-redux'
  import {selectUser, login, logout} from '../../features/userSlice'
  const Register = () =&gt; {
      const user = useSelector(selectUser)
      const dispatch = useDispatch()
      const history = useHistory()
      const [loading, setLoading] = useState(false)
      const [registerInputs, setRegsiterInputs] = useState({
          email:'',
          full_name:'',
          user_name:'',
          password: '',
      })
      const changeInput = (e) =&gt; {
          e.persist()
          setRegsiterInputs({...registerInputs, [e.target.name] : e.target.value})
      }
  
      const register = (e) =&gt; {
          e.preventDefault()
          setLoading(true)
          const data = {
              full_name : registerInputs.full_name,
              user_name : registerInputs.user_name,
              password : registerInputs.password,
              email : registerInputs.email
          }
  
          axios.get('/sanctum/csrf-cookie').then(response =&gt; {
              axios.post('api/register', data).then((res) =&gt; {
                  if(res.data.success) {
                      dispatch(login({
                          email: res.data.data.email,
                          full_name: res.data.data.full_name,
                          user_name : res.data.data.user_name
                      }))
                      console.log(user)
                      history.push('/')
                  }else {
                      alert('Please fill all the information needed')
                  }
              })
          });
          setLoading(false)
          
      }
      return  &lt;div className=&quot;register&quot;&gt;
      &lt;div className=&quot;register__container&quot;&gt;
              &lt;div className=&quot;register__form&quot;&gt;
                  &lt;div className=&quot;register__form__header&quot;&gt;
                      &lt;h3&gt;&lt;/h3&gt;
                      &lt;div className=&quot;header_p&quot;&gt;
                          &lt;p&gt;Inscrivez-vous pour voir les photos et vidéos de vos amis.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;button&gt;Se connecter Avec facebook&lt;/button&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;register__form__body&quot;&gt;
                      &lt;form&gt;
                          &lt;input name=&quot;email&quot; value={registerInputs.email} onChange={changeInput} type =&quot;text&quot; placeholder=&quot;Email&quot;/&gt;
                          &lt;input name=&quot;full_name&quot; value={registerInputs.full_name} onChange={changeInput} type =&quot;text&quot; placeholder=&quot;Nom Complet&quot;/&gt;
                          &lt;input name=&quot;user_name&quot; value={registerInputs.user_name} onChange={changeInput} type =&quot;text&quot; placeholder=&quot;Nom d'utilisateur&quot;/&gt;
                          &lt;input name=&quot;password&quot; value={registerInputs.password} onChange={changeInput} type =&quot;password&quot; placeholder=&quot;Mot de passe&quot;/&gt;
                          &lt;button disabled={loading} onClick={register} type=&quot;submit&quot;&gt;Insctiption&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;register__form__footer&quot;&gt;
                      &lt;p&gt;
                      En vous inscrivant, vous acceptez nos Conditions générales, notre Politique d’utilisation des données et notre Politique d’utilisation des cookies. 
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;register__ignore&quot;&gt;
                  &lt;p&gt;Vous avez un compte? &lt;Link to =&quot;/login&quot;&gt;Connectez-vous&lt;/Link&gt;&lt;/p&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;Footer /&gt;
      &lt;/div&gt;
  }
  
  export default Register;
  </code></pre>
  <p>Any changes i should do to prevent losing redux state after reloading page?
  Thank you in advance</p>