Let's get started on this bundle cell action creator, so we're going to make an action creator that
is going to take in some amount of code and presumably maybe also a cell ID or something like that.
We're then going to start up our bundling process and then we're going to dispatch two separate actions.
One will be bundle start and the other will be bundled complete because we are dispatching two actions
from one action creator.
And we're also going to have some asynchronous code because, of course, bundling is asynchronous.
We're definitely going to have to make use of redux thunk in this case.
So that means let's go back over to our action crater's index file.
Inside of here, we've already got several different action creatures, so this fire is getting pretty
large right now.
If you wanted to, we could definitely split up all these different action creatures into some separate
files in the action creators directory and then re-export them from this index status file that is totally
optional.
You can do it if you want it.
You only have to do that if this file is getting a little bit too large for you just to keep things
really straightforward for you and I.
In this course, I'm going to keep all my different action creators in this one file.
But personally, just between you and me, I really would recommend that you eventually split this file
out into several different files inside the Action Creators directory.
But again, I'm going to leave that up to you.
OK, so once again, we need to make an action crater that is going to use Redux Thunk, we covered
Redux Thunk a little bit ago towards the very start this course when we were first talking about typescript
and redux together.
So just as a very quick reminder, the only real big thing we have to do here is import.
Dispatch from Redux, this right here is a type it describes the type of the dispatch function that
will be provided to our redox think function.
Besides importing dispatch, we're also going to import those two actions we just created that's going
to be our.
When will start action and complete action?
Finally, I'm also going to import our bundle function, which we had to find inside of our bundle directory,
so remember inside there, bundler indexed items, we are eventually exporting that bundle function
as the default expert from this file.
So I'm going to import Bundall from up one, directory up another.
One taller and that's it.
OK, so I think that's all the imports we need.
Let's now go down to the bottom, the file.
Down here at the very bottom, I'm going to export Arnst.
Eight bundle.
So this is our action creator.
I'm going to just assume right now that we're going to call this action creature with two separate arguments,
the first one will be the idea of the cell that we are creating this bundle for.
And that, of course, will be a string.
And then the second argument is going to be our input or whatever user wrote into that code.
Ed, I kind of want to call this code, but we might eventually want to call the result of our bundling
process code.
So I'll just give this a name of input instead.
So input is going to be the actual raw code that a user typed into that code.
Ed, this is what we want to feed into our bundle function.
Then from our function, we'll return.
Another function.
That will be called with dispatch.
We're going to annotate that things type as dispatch and then remember putting those in brackets and
put in action.
Like so and we need to make sure that we actually imported that type, so let's go back to the very
top very quickly.
It looks like we imported separately all these actions, but we never imported the overall action itself.
So I'm going to add in.
Action as well.
Remember, this thing is kind of a combination of all possible actions.
Let's go back down and now that air should be gone.
Yep, very good to remember the entire point of this right here is to just make sure that we can only
call dispatch with an actual real action.
So it must have a valid type that actually exists inside of our app and it must have a valid payload
property to go along with that as well.
That's what this type annotation right here is all about.
OK, so now that we've got the start of our redox thung stuff, let's think about what needs to go on
inside of here.
Well, first off, once again, we probably want to immediately dispatch an action that says, hey,
we're about to bundle this cell so we can update that loading property inside of our reducer.
So the instant we get inside of here, I'm going to dispatch.
An action of type action type Bundall start and then remember, we just put together all the different
payloads and whatnot for this.
So our payload in this case is going to be an object that describes exactly which cell we are about
to bundle.
So we have to provide a cell ID.
So I'd like so and of course, we can just reduce that down to simply sell it.
All right, it's that simple enough.
Then after that, we can kick off our bundling process, so we'll do a contest result equals a weight
bundle and we're going to provide the raw code as an argument.
So that's going to be for us that input right there.
We are making use of the keyword inside this function, so let's make sure that we mark the inclosing
function as async.
Then once we get that result, we can dispatch a second action and this will be our bundle, create
first bundle of complete action.
So we'll do a second dispatch.
With a type of action type, Bundall complete.
And then our payload will describe exactly which cell this is for.
So we'll put in our slide.
Again, we can condense that down to just slide and then remember, an action of type Bundall complete
is also going to have a bundle of property.
If that doesn't sound familiar, remember, we just wrote all this stuff out a moment ago inside of
our actions file, so here's our actions file.
And we had said that a action of type bundle, create or bundle complete would have supplied.
Cold air under that bundle property.
Or bundle property right here.
Is going to be an object that has a code.
And that is going to be coming from results, code and air, which will come from results air.
Naturally, we could do some deal structuring of that result object, or we can really just provide
result directly like so.
OK, so this looks good.
Well, I think that's just about it for this action creator.
So we've just about got everything we need here put together.
So let's take a pause right here.
When we come back, the next video, we can now go back over to our code cell components and make sure
that whenever we've gone past that seven hundred and fifty millisecond or so threshold, we call a section
creator and start up our bundling process.