Resetting the redux store when routing other components in React

Question

Using react-router-dom, react-redux, I tried to implement a website. The website has displayed the content based on the language setting using the redux store. When clicking the language area in Navbar, it callback changeLanguage function, then it changes the state of language in the store and the website displays contents with changed language properly. However, when I click the other link '/home' or '/main' in the navbar, it is landing on the page with resetting the redux store. Could let me know how to deal with this issue?

languageSlice

import { createSlice } from "@reduxjs/toolkit";

export const languageSlice = createSlice({
  name: "language",
  initialState: {
    language: "Fr",
  },
  reducers: {
    getLanguage: (state, action) => {
      return state;
    },
    changeLanguage: (state, action) => {
      if (action.payload == "En") {
        return {
          ...state,
          language: "Fr",
        };
      } else {
        return {
          ...state,
          language: "En",
        };
      }
    },
  },
});

export const { getLanguage, changeLanguage } = languageSlice.actions;
export default languageSlice.reducer;

store.js

import { configureStore } from "@reduxjs/toolkit";
import languageSlice from "./languageSlice";

export default configureStore({
  reducer: {
    languageSlice: languageSlice,
  },
});

LanguageService.js

import { getLanguage, changeLanguage } from "../app/languageSlice";

export const changeLan = (dispatch, language) => {
  dispatch(changeLanguage(language));
};

export const getLan = (dispatch) => {
  dispatch(getLanguage());
};

Index.jsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./app/store";
import { Provider } from "react-redux";
import "bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById("root")
);

reportWebVitals();

App.jsx

import "./App.css";
import React, { useEffect } from "react";
import { MainPage } from "./MainPage";
import { Home } from "./Home";
import { Switch, BrowserRouter, Redirect, Route } from "react-router-dom";
import Navbar from "./layout/NavBar";
import Event from "./staticPages/Event";
import { getLan } from "./service/LanguageService";
import { useDispatch, useSelector } from "react-redux";

function App() {
  const dispatch = useDispatch();
  const language = useSelector((state) => state.languageSlice.language);

  useEffect(() => {
    getLan(dispatch);
    console.log(language);
  }, [language]);

  return (
    
      
        
        
           } />
           } />
           } />         
           Page is not found!} />
        
        
      
    
  );
}

export default App;

NavBar

import { Nav, Navbar, NavDropdown, Image } from "react-bootstrap";
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeLan, getLan } from "../service/LanguageService";

const NavBar = () => {
  const dispatch = useDispatch();
  const language = useSelector((state) => state.languageSlice.language);

  const changeLanguage = () => {
    changeLan(dispatch, language);
  };


  return (
    <>
      
        
         Home
        
        
          
            {language}
          
        
                
          
                         
              
                Latest Events
                 
              
                Access Survey Portal
                         
            
          
      
    
  );
};

export default NavBar;

EventPage

import React from "react";
import { useSelector } from "react-redux";

const Event = () => {
  const language = useSelector((state) => state.languageSlice.language);

  return (
    <>
      {language != "En" ? (
        
          
            
              
                
                  
                    
                      Latest Events
                    
                  
                
              
            
          
        
      ) : (
        
          
            
              
                
                  
                    
                      Événements récents
                    
                  
                
              
            
          
        
      )}
    
  );
};

export default Event;

Alan · Accepted Answer

The resetting of your store state is caused by a combination of two issues:

First, as you do not hydrating your React Store's state based on the current URL, you must somehow save and load your Store's state to preserve it between page loads.

You can emulate this problem by simply copying and pasting the URL to a new browser window; you'll notice the store state is reset. There are a number of ways to store state, and you may wish to use either sessionStorage which remains for the duration your app is on the browser's tab, or localStorage which remains until your app clears it.

Second, the reason you are getting page loads when you don't expect to, is that it appears you are not using React Router correctly.

You are using Bootstrap's Navbar Link, which behaves like a normal anchor tag. Click on the Nav.Link instructs your browser to make an HTTP GET call, and does a pageload which resets the store.

Instead you need to override the Bootstrap Nav Link component to instead use React Routers Link component, which will not do a page load, and instead load the correct React module.

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage https://reactrouter.com/web/api/Link

Resetting the redux store when routing other components in React

Answers (1)

Related Questions