Mastering Data Management with Redux

Redux is essential for managing the data layer of our application. It serves as a central hub for handling and modifying data.

In smaller applications, using Context API is appropriate. However, as our application grows, it becomes necessary to utilize a library like Redux. Redux offers a structured method for efficiently managing and updating data.

Setting up Redux can be a bit complex, and it has a steep learning curve. If your application is very small, you may not require Redux.

The Redux Toolkit package serves as the standard method for writing Redux logic. It was initially developed to effectively tackle the three common concerns that often arise when working with Redux.

1️⃣ Setting up a Redux store can be overly complex.

2️⃣ To harness the full functionality of Redux, it often requires the installation of multiple packages.

3️⃣ Using Redux often involves writing a significant amount of boilerplate code.

The Redux store is a central object at the heart of Redux that contains different sections, each composed of smaller pieces. It serves as a global state that can be accessed by any component, similar to how context works in React.

Redux Context serves as a central hub, like a large global object, that can be accessed from anywhere within our app.

🧐 Can we have multiple contexts?

➡️ Yes, it is possible to have multiple contexts in an application. In Redux, we utilize a single store to manage our application's state. Within this store, we create slices, which represent different portions or sections of the overall state. Each slice corresponds to a specific aspect of the store's data.

🧐 What different slices can our app have?

➡️ In our app, we have common slices like user, authentication, theme, and card. Each slice represents a specific part of the store. To modify the store, we use the dispatch function to trigger actions.

When we click on "add," an action is dispatched, which is a regular JavaScript function. The reducer function then handles this action and updates the state of the card slice.

🧐 Why is it not possible to directly modify the store?

➡️ In a large application, it is crucial to prevent random components from making uncontrolled modifications to the store. This helps maintain a clear track of all changes and ensures that modifications are done in a controlled and organized manner.

By restricting direct access to the store, a more structured and traceable approach to managing the application's state can be implemented, promoting better organization and maintenance of the codebase.

🧐 How can we effectively read the store?

➡️ The recommended approach for reading the store effectively is to use the useSelector() hook. It allows us to access specific data from the store.

When we need to retrieve information related to the card, we can utilize the appropriate selector. By calling the selector, we obtain the necessary data to update the cart or perform any required actions based on the retrieved information.

When we use a selector, it is often referred to as subscribing to the store.

✨Simplified flow diagram of the Redux process:

➕ ➡️ dispatch(action) ➡️ render function ➡️ update ⬇️

🛒 ⬅️ useSelector() [To read data] ⬅️ store [ slice ]