Implementing Bundles in Your Redux Store

Our application is currently in a good spot, but there are still a couple of things we need to take care of, one of which is the backend of our code cell component. We need to address this before we can fully utilize and optimize our application.

The next big thing we focus on is to add the bundling logic into the Redux side of our application. The first thing we need to consider in this process is how this bundles thing is going to integrate into our Redux store. As we have been saying all along, there might be some kind of bundles reducer that stores the bundled code for each individual cell. But, is this really the best solution?

Let us take a look at one or two different ways of implementing this bundles piece of state inside of our Redux store. Before we dive in, let us clarify exactly what derive state is and why it is essential to understand.

What is Derived State, and Why Do We Care?

Derived state is a state that is entirely dependent on another value inside of our store; it is calculated from the contents of our code cells. It is essential to understand derived state thoroughly because it affects the performance of our application, and it can lead to unpredictable results if not handled correctly.

When working with selectors, we want to avoid selectors that have any kind of asynchronous logic inside of them. Instead, we want to make use of selectors when we have a synchronous calculation. As soon as we have asynchronous operations, we generally do not want to make use of selectors.

Using Selectors in Redux

Selectors are a specific tool in the world of React and Redux to handle derived state. We've actually already made use of it inside this course. Back inside of our cell list component, we're making use of use type selector. This selector is taking two pieces of state, the ordering of all of our cells and our data object, and combining them together to put out an ordered array of all of our different cell objects.

Asynchronous code in selectors can be challenging to handle and can lead to unpredictable results. So, because our bundler is very much asynchronous in nature, we are not going to create a bundle selector.

Implementing Bundles in Your Redux Store

Now that we've discussed derived state and selectors let us take a look at our diagram below. This diagram showcases our Redux store with a sales piece of state, and a bundle selector and a bundle component.

We do want to have a bundles reducer in our Redux store, so the takeaway here is to implement the diagram above. But, our question now becomes, how are we going to generate these bundles? Let's take a pause and think about this.

We should take this step-by-step and work through each process to ensure that we come up with the best solution.