Instructor: In the last section
we installed two dependencies to our project.
We're now going to go look at a diagram really quickly
that's gonna give us a better idea
of how this application's going to be designed.
Then we'll go back over to our code editor
and start working on it.
Okay, here we go.
So in total, we're gonna have three separate components
inside of our application.
We're gonna have something we're going to call
the app component,
we'll have a comment box and a comment list.
We'll first begin with the comment box right here.
So the comment box component is responsible
for showing this tiny little form to the user.
It will have a text area and a button.
And any time a user clicks on the button right here
we will add a comment
that the user entered to the comment list.
In addition, when the user clicks on submit
we'll also clear out all the text
inside of the text area right here.
The comment list component is gonna have a very simple job.
It's going to display all the different comments
that the user has added inside this app.
Both those components, so both the comment box
and the comment list will be displayed inside of something
we'll call the app component.
Now, the app component really has no purpose
or no big job assigned to it.
All it really does is show the comment box
and the comment list, that's all.
So on the react side of things, three components,
each of which pretty darn straightforward I think.
On the Redux side, we're gonna have two big pieces.
So for the Redux design of our application
we'll have a global state object
with one reducer inside of it.
That reducer is going to produce a piece of state
that we will refer to as simply comments.
This will be an array of strings
where each string represents a comment
that the user has added via that comment box form.
Next up, we're gonna have one single action in here as well.
We'll call it the safe comment action.
So anytime we call these Safe Comment Action
or Action Creator, we will parse in the comment text
and hopefully we're going to take that comment
and add it to our list of comments
that is created by our comments reducer.
Now at this point, we've kind of looked at the design here.
So we've spoken about,
"Hey, what do we have in the terms of components
and what do we have in terms of the Redux side
of this application as well?"
And at this point, you're probably thinking,
"Steven, when are we gonna be talking
about the testing stuff?"
Well, believe it or not
we've kind of already been talking about the testing stuff
particularly in this section as well.
So let's take a quick pause right here.
We're gonna come back in the next section
and you're gonna figure out why talking
about the different parts of our application
and the responsibility of each one is a critical component
of building out some testing inside of your application.
So quick break and we'll talk about
why that's important in the next section.