We've got a great collection of reusable components, such as our code editor, the preview window,
very sizable stuff.
We've got our text editor put together as well.
So really good on the side.
But all these different components are still making use of local components state.
So we're going to start to change that inside the section.
We're going to start to add in Redox to our app.
We're going to have Redox handle and behave as a central store of all these different cells and eventually
handle the creation of all these different bundles for all the different code cells as well.
The first thing we need to do is come up with some design for our reduc store.
Let's sit down and took a quick stab at one way that we might put this all together.
So I think that our Redock store should probably have two separate reducers.
One will be called cells and the other will be called bundles.
Cells is going to have a listing of all the different cells in a text cell or a code cell that we want
to display on the screen inside the cells reducer.
We're going to have a couple of different properties being maintained.
We're going to have, of course, data, so that's going to be some kind of collection of all the different
cells we have.
We're going to have all of our different code cells and all the different tech cells kind of commingling
inside this data thing.
Well, then have a loading flag and an air flag, we are going to eventually allow a user to save this
list of cells and fetch a list of cells from a remote API.
I say remote, but it is technically going to be hosted on a user's machine.
So this API is going to allow us to fetch and save cells, so of course we're going to have loading
and er just reflect our loading attempt and er just to handle any errors that come along during that
saving or fetching process.
The order of cells inside of rap also is really important, we always want to make sure that we reflect
the exact order in some way and always say, OK, we want this Texel first, then this code spelled
in this Texel and so on.
So we're going to have a separate order property.
That's going to be an array of strings.
This array of strings is going to be really an array of the order of.
Cells that we have, so each of these strings are going to be the IDs of each individual cell.
If that part is confusing, don't sweat it, we're going to, of course, go into great detail.
Then separate from our cells reducer, we'll also have bundles, so bundles is going to be reducer that
holds the bundled output from every code cell, that's pretty much it will go into more detail on bundles,
of course, once we start putting that part together.
Now, in addition to these two reducers, we will, of course, also have a variety of different action
creators.
So we'll have update cell, which will be called whenever user types inside of a text cell or code cell
delete cell whenever user attempts to delete a cell insert cell before.
Or we might also name this insert cell after.
So the reason this is called insert cell before or after is remember, we want to allow a user to insert
new cells between existing ones.
So we need to somehow provide some reference and say after the cell with ID, one, two, three, add
in a new text cell.
That's going to be the goal of the section creator.
Mousel To reorder cells, so we want to maybe move a cell up in the listing or down in the listing and
then fetch cells that will of course allow a user to fetch an existing list of cells from this local
API that we're going to eventually put together.
Now, this diagram is only showing our two reducers and our action creators, but we are, of course,
also going to create a whole variety of different action types and also action interfaces as well to
support these action creators as they get processed by all the different reducers.
So it's pretty much the exact same structure from kind of a type standpoint or type script standpoint
as what we put together on our previous redox application.
In this course, everything exact same pattern, nothing really different.
The only big difference here is that, of course, we're going to have many more action creators, a
lot more stuff going on inside of our reduc store and so on.
OK, so that we understand our general pattern.
Let's very quickly install a couple of dependencies into our project.
So over at my terminal.
We will do an NPM install.
Dash to save exact, we'll get at type's react redux at seven one one five.
We will get react redux at seven to two.
Redux at four zero five.
Redux plunk at two three zero.
And then finally, we'll just go ahead and install Axios right now, we're not going to use it right
away, but we'll just kind of put it in place.
There's a lot of infrastructure we have to put in before we even start thinking about making use of
Axios.
But whatever, we'll just install it right now.
It'll do Axios at zero to one one.
OK, so that should be it, I'll go ahead and run that.
As usual, this will take a minute or two, so we'll take a quick break here and then start to wire
up all this rock stuff in the next video.