Now that we've had a very long academic and dry discussion, let's take a look at how we're going to
actually implement all this Bundall stuff.
OK, so this diagram is going to be a little bit crazy, but a lot of the stuff inside of your trust
me, you already understand it's on the left hand side.
We've got our reduc store inside of our store.
Is these cells reducer?
Two pieces of state inside of there are data and order.
So we're going to take those two pieces of state which we're already doing, wire them up with a selector
and provide an ordered list of cells to our cell list components the cell.
This component is then going to generate some number of cell list item components.
And internally, those might show a code cell.
That's where things start to get a little bit interesting inside of these code cells.
We're going to leave in some logic inside there around that bouncing stuff.
So we're going to say that if the code belonging to a cell is unchanged for seven hundred and fifty
milliseconds, when I say code right there, I'm talking about whatever user typed in and we're going
to take that code and call a bundle cell action creator with it.
We are going to make an action creator that is going to be responsible for bundling all the code from
a cell.
When we initially call this action creator, we're going to immediately dispatch an action of type bundle
start that is going to be a signal that we are starting up the bundling process for some particular
cell.
And we will be able to use that, for example, to maybe show a loading bar or a progress bar for a
particular cell.
We might want to show a progress bar if it ever takes a long time to complete a bundle.
And that's entirely possible if a user tries to import some kind of NPM module that is rather large.
And that might just take a couple of seconds for us to actually download and bundle everything.
Then when the bundle is created by the bundle cell action creator, we will then dispatch an action
of type bundle complete and inside of that action will be the result of the bundle.
So all the code coming out of the bundle and any possible heirs, it might have occurred as well.
So we're going to receive both these action types or both really those actions, actions that have those
types inside of our bundles reducer, we'll use that to update some piece of state.
Inside there, we'll figure out the structure of the state, but it will probably be some kind of object
where the keys are, these idea of a cell and the value will be the output of the bundle or something
like that.
And it will take that piece of state and somehow communicate it back over to our code cell component.
And our code cell component can then communicate the output of the bundle down into the preview component.
And that's pretty much it.
That is the entire flow.
You'll notice here that we're not really doing anything too crazy just because we don't have to know
real requirements.
So we were just relying upon our action creator to do the actual bundling process.
We're going to see the start and complete and eventually get the results over to our bundles reducer.
All right, so now that we've got this overview, quick pause right here and start with our implementation
in just a moment.