Now that we understand the future, we're going to add in let's take a look at a diagram or two and
think about how we're going to do the implementation.
All right.
So first off, quick diagram of what is going on inside of our application right now.
So inside of our code cell component, we take some amount of code from cell number one, two or three,
or however many code cells we have.
We feed them into a bundler and we get back a bundle.
And the bundle that we get back is intended for a very particular cell.
The majority of all this logic is implemented inside of our code cell component.
Let's go back over to our Ed and find where that logic is.
So here's my code subcomponent.
Inside of our U.S. function is where we start to do our bundling and then remember the actual bundling
itself and getting the bundle back into a component is kind of on the side of things.
So all you and I are really doing here is passing off some code to the bundle action creator.
We then eventually get back this bundle by taking a look at some state that is inside of our store.
So as we start to think about somehow taking the code not only from code cell number two, but also
one and using that to produce this output bundle, we're going to just add in a little step to this
entire process.
So before we hand off anything to our bundler, we're going to go through a sort of joining step in
this joining step, we're going to say that whenever we are attempting to bundle code, sell number
one.
Well, in that case, there are no prior cells, no cells before cell number one.
So we're going to take just the code from cell number one and pass it into our bundler.
But as we go on to code cell number two, we need to somehow take the combination of code cell one and
number two and pass it into the bundler.
And then for three, we want to take the combination of one, two and three and pass it into our bundler.
The bundler is going to behave as usual.
It's going to go and try to transplant code.
It's going to bundle all of it, grab dependencies and eventually give us back one single output bundle.
We're still going to communicate these output bundles into our code cell components and then eventually
pass that bundled code down into the preview component where it will be actually executed.
So the big change here is this joining step, and the first question we have to ask ourselves is where
should we write out this joining step?
Well, when we really look at this joining step right here, we are talking about calculating some new
value.
We are joining together multiple different code cells code and essentially we're joining or calculations
value using some existing state inside of our application.
So the existing state is the code inside of each of our code cells because we are calculating a new
value based upon existing data inside of application.
We would refer to all this joint code right here as derived state.
And remember what we have said about Drive State in the past, usually a very good place for drive state
is inside of a selector and very frequently we will place these selectors inside of react components.
So here's what I think we should do to get started.
I think that inside of our code cell component, we should add in a new selector towards the very top
of the component self inside of that selector.
We should try to find the code from the current cell and all the previous cells and join them all together
and essentially do this joining step.
So that's exactly what we're going to do, we're going to add in a selecter to our code cell component.
It's going to take the incoming code that is provided through this cell right here.
And through that and some other state inside of our store, we're going to generate these brand new
kind of cumulative code values, combination of the current sell, plus all the previous cells.
OK, so we've got an idea of how to begin implementing this.
Let's take a pause right here and then start to write out some code in just a moment.