How to Implement Caching in React Redux applications ?
Last Updated :
26 Mar, 2024
Caching is the practice of storing frequently used or calculated data temporarily in memory or disk. Its main purpose is to speed up access and retrieval by minimizing the need to repeatedly fetch or compute the same information. By doing so, caching helps reduce latency, conserve resources, and ultimately improve overall performance.
Caching in Redux Application:
In Redux applications, caching involves storing previously fetched data or computed results in memory to avoid redundant operations and optimize performance. Redux, being a predictable state container, manages the application's state in a single immutable store. While Redux provides a centralized approach to state management, incorporating caching mechanisms can further enhance its efficiency, especially when dealing with data that doesn't frequently change or requires expensive computations.
Here we going to make simple counter application that reserve count in cache, and when we refresh the page, it fetch count from cache and display as it was.
Steps to implement cache in React Redux application:
Step 1: Make a simple react application
npx create-react-app <-foldername->
Step 2: Move to the application directory:
cd <-foldername->
Step 3: include following dependency to make redux Application
npm install redux react-redux // for redux application
npm install redux-persist // for implementing caching
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-redux": "^9.1.0",
"redux": "^5.0.1",
"redux-persist": "^6.0.0"
},Folder Structure:
Step 4: Update index.js file (main.jsx file in case of react application with Vite)
JavaScript
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./store";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
,
</React.StrictMode>
);
Step 5: Update App.jsx and make a component Counter.jsx
JavaScript
// App.jsx
import Counter from "./Counter";
function App() {
return (
<div className="App">
<h1>Redux Counter App</h1>
<Counter />
</div>
);
}
export default App;
// Counter.jsx
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset } from "./actions";
const Counter = () => {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => dispatch(increment())}>
Increment
</button>
<button onClick={() => dispatch(decrement())}>
Decrement
</button>
<button onClick={() => dispatch(reset())}>
Reset
</button>
</div>
);
};
export default Counter;
Step 6: Make three more js file as 'store.js', 'reducers.js' and 'actions.js' in src
JavaScript
// store.js
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import counterReducer from './reducers';
const persistConfig = {
key: 'root',
storage
};
const persistedReducer = persistReducer(persistConfig, counterReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);
export { store, persistor };
// actions.js
export const increment = () => {
return {
type: 'INCREMENT'
};
};
export const decrement = () => {
return {
type: 'DECREMENT'
};
};
export const reset = () => {
return {
type: 'RESET'
};
};
// reducers.js
const initialState = {
count: 0
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + 1
};
case 'DECREMENT':
return {
count: state.count - 1
};
case 'RESET':
return {
count: 0
};
default:
return state;
}
};
export default counterReducer;
Step 7: Run application and update counter and then refresh page.
npm run start
In case of react with Vite
npm run dev
Output:
Similar Reads
How to implement pagination in React Redux Applications?
Pagination is a common requirement in web applications. It is very helpful when we wish to display or manage a large dataset on the website in an aesthetic manner. Whenever it comes to displaying a large number of data, state handling comes into the picture. The idea of pagination has a good binding
5 min read
How to handle data fetching in React-Redux Applications ?
Data fetching in React-Redux applications is a common requirement to retrieve data from APIs or other sources and use it within your components. This article explores various approaches to handling data fetching in React-Redux applications, providing examples and explanations for each approach.Table
4 min read
How To Implement Optimistic Updates in Redux Applications?
Optimistic updates enhance user experience by making your Redux application feel more responsive. This technique involves updating the UI before receiving confirmation from the server, assuming that the update will succeed. If the server responds with an error, the application can then revert to the
4 min read
How can you optimize the performance of React-Redux applications?
Performance optimization in React-Redux involves improving the speed, efficiency, and responsiveness of applications by minimizing rendering times, reducing unnecessary re-renders, and optimizing data fetching and processing. By implementing optimization techniques, you can enhance the overall user
5 min read
How to test React-Redux applications?
Testing React-Redux applications is crucial to ensure their functionality, reliability, and maintainability. As we know, the React-Redux application involves complex interactions between components and Redux state management, testing helps us to identify and prevent bugs, regressions, and performanc
10 min read
Implementing Undo & Redo Functionality in React Apps
Undo/Redo is a feature used frequently in various applications. React Hooks is a concept to handle and respond to the change of state in React Components. In this article, we will try to implement the Undo/Redo functionality using react hooks thereby increasing your understanding and knowledge of va
3 min read
How to Optimize the Performance of React-Redux Applications?
Optimizing the performance of React-Redux applications involves several strategies to improve loading speed, reduce unnecessary re-renders, and enhance user experience. In this article, we implement some optimization techniques, that can significantly improve the performance of applications. We will
9 min read
How to Log and Display Errors in React-Redux Applications?
In this article, we make a React-Redux application to manage and display errors. We create actions ( CLEAR_ERROR ) for managing errors and ErrorDisplay components to display errors. We implementing an error reducer to manage the error state and connect it to the redux store. Approach to Implement lo
3 min read
How to Handle Forms in Redux Applications?
Handling forms in Redux applications involves managing form data in the Redux store and synchronizing it with the UI. By centralizing the form state in the Redux store, you can easily manage form data, handle form submissions, and maintain consistency across components. We will discuss a different a
5 min read
How to Normalize State in Redux Applications ?
In Redux applications, efficient state management is essential for scalability and maintainability. Normalization is a technique used to restructure complex state data into a more organized format, improving performance and simplifying state manipulation. This article covers the concept of normaliza
3 min read