React code splitting is a technique for optimizing the performance of React applications by splitting the application code into smaller chunks, which can be loaded on demand as needed. <\/p>\n\n\n\n
This helps to reduce the initial load time of the application, so this improve its overall performance, and enhance the user experience.<\/p>\n\n\n\n
React code splitting can be achieved in a number of ways, depending on the specific needs of the application. One popular approach is to use dynamic imports, which allow components or modules to be loaded on demand, rather than all at once. <\/p>\n\n\n\n
This can be achieved using tools like Webpack or Rollup, which support code splitting by generating multiple output files, each containing a subset of the application code.<\/p>\n\n\n\n
\nReact code splitting is well documented by react official <\/strong><\/p>\nYou can visit and use react code splitting, before implementing redux & redux saga code splitting,
Visit the following link : https:\/\/reactjs.org\/docs\/code-splitting.html<\/a><\/strong> <\/cite><\/blockquote>\n\n\n\n
\n\n\n\nRedux code splitting<\/h2>\n\n\n\n
Install dependencies<\/h2>\n\n\n\n
we are using here all the latest packages, so we need the following dependencies for setting up the redux and redux Saga. <\/p>\n\n\n\n
1. React redux<\/h3>\n\n\n\n
React Redux<\/a> <\/strong>is the official react UI bindings layer for redux. It lets your React components read data from a redux store, and dispatch actions to the store to update state.<\/p>\n\n\n\n
npm install react-redux<\/pre>\n\n\n\n2. Redux toolkit<\/h3>\n\n\n\n
The Redux Toolkit<\/a><\/strong> package is intended to be the standard way to write Redux<\/strong><\/a> logic. It was originally created to help address two common concerns about Redux:<\/p>\n\n\n\n