Redux Tutorial #1 - React js tutorial - How Redux Works Video Lecture | Learn and master: Flux - Game Development

all right let's learn Redux Redux is
great because it changes the flux
framework and provides some ways that
really help you avoid a lot of
complicated bugs that can end up in a
flux like application at first it seems
really strange because it does a few
things very very differently and they
don't seem to be advantages at first but
I promise if you have more of a complex
application it's going to be worth the
time it takes to set up Redux at first
so kind of if you're starting with
reacting you're just building small
component just use react keep all your
data in a state on your maybe layout
level component if you're going to be
building more of an application use flux
flux sets up very quickly and it's
really stable in a lot of ways when you
start getting a complicated data
scenarios complicated chains of events
that's when you need to go to Redux
because it's really going to simplify
your application and the time it takes
to set up Redux which is more than flux
it's a little more frustrating I'm going
to be honest but the time it takes to
get Redux set up is really going to pay
off over the lifespan of the application
so let's kind of look at how redux does
things I'm going to take a few minutes
just to talk about it in this video and
I promise it's going to be time that you
save in the long run because if you
understand Redux going in it makes it a
lot easier to get up to pace with it so
the biggest thing they change is really
over here the reducers and the ones
store will start with the one store so
you don't have multiple stores with
Redux you have one big store and instead
of multiple stores you have multiple
properties on that one big javascript
object so whereas in our prior
application we would have a to-do list
store we would have a settings store and
then we'd have maybe a favorites store
in redux we would just have one big
javascript object and that's our store
and it would have three properties it
would have a to-do list property it
would have a settings property and it
would have a favorites property so it's
kind of multiple stores and it behaves
like multiple stores but you keep it all
in one giant JavaScript object that we
never mutate and we never change we
never actually changed this object we
only create new versions of this object
that way we always have a full history
way back from the time our first our app
booted up in the browser to wherever you
end up you have a full history of the
exact
act state of your application every step
along the way every change along the way
and we'll get into that a little bit
more but the key thing is the store is
immutable
you cannot mutate any value on the store
you only ever create a brand new store
object so I'll do a video on
immutability in JavaScript because
JavaScript really doesn't do
immutability negatively it doesn't do it
very well anyway so we'll kind of get
into immutability in another video if
you don't really know what that is so
you've got your one store and they're
going to wrap your entire application
your entire react application all their
components you're going to wrap them
with one provider components so if
you're normal your base component is a
layout then your base component will be
a provider components in redux that's
really the only big change you make to
your components and that could that
provider component when the store
changes it rear Enders your whole
application every single time no matter
how many changes there are always
re-renders the whole application which
is we've already established react does
very well due to virtual Dom so you've
got your provider component listening to
the store and then the only thing that
changes in the components area is you've
got smart components and dumb components
and this is really just good react
architecture anyway but you've got these
react you've got these smart components
and they're the top level like page
level some people call them pages some
people call them containers and put them
in containers in a containers folder but
they're smart components they're aware
of your framework they know how to pull
a property off of your store say the
to-do list piece of that store and they
will take the to-do list and they'll
inject that array of two do's into all
the child properties so you've got your
dumb components like your to-do list
component and all it knows is give me a
list of two do's it's an array and I'll
spit out a to-do list for you I don't
care if you're using Redux for use in
flux if you're using relay you give me a
list of to do's and I'm going to spit
out a to-do list for you so you're smart
components again are the only things
that are aware of Redux and then they
pass they strip the data off of the
store and pass it through and then these
components trigger actions and that's
the
that's the most like flux they dispatch
actions and those actions can dispatch
other actions in our flux example and
asynchronous action might dispatch a
fetch data action and then when the data
comes in from the from the Ajax call
it's going to dispatch a receive data
action and it's got a payload of all the
data or if that error is out it might
dispatch a fetch data error action and
the payload would be the error message
so actions work a lot like flux no real
big change there and the reducers is the
other big piece that changes so instead
of having multiple stores that all
manage their own data you have multiple
reducers that all modify the piece of
data off of the store but they modify it
in an immutable way they always create
new chunk of data to go back on the
store and we'll cover that again in the
immutable video so instead of having
those three stores you have three
reducers one reducer will probably work
off the to-do list portion of the store
one reducer will work off the Settings
portion of the store and one reducer
will work off of the favorites portion
of the store the favorites property and
what's cool is is they can all react off
the same action let's say you're in the
settings view over here and you click on
the button that says don't show
completed or hide completed because it's
a to-do list so then we trigger the hide
completed action and then all three
reducers probably care about that the
settings reducer cares because we need
to turn hide completed to true so that
way that button will toggle in the view
on the next render and then the to-do
lists reducer cares because we want to
now filter out the visible we want to
set visible to false on all the ones
that are completed and then on the the
favorites view will probably do the same
thing all the ones that are completed
are also visible false so then all of
those act all at once bla bla bla none
of them depend on each other because
they're not talking to the same pieces
of data they simply all make their
changes the store updates the
componentry renders the entire
application there's no wait for going on
because they all act on completely
different sets of data so that's kind of
Redux in a nutshell that's kind of how
ducks works and some key benefits that
Redux really provides is it's a really
simplified data because there's one
store that's pretty much it
all your data comes from this one thing
there's really most of these racing
conditions you would end up with are out
of the picture now every change of any
kind means a complete application
rerender and because of that we also get
to do time travel history that store is
going to keep a complete list of all the
store states all throughout time state
one state two we made a change we made a
change and if at any point in time you
want to rollback your application while
you're debugging you simply say hey
let's render this one right here boom
and then the provider component can
render the application in the exact
state it was in there or you can travel
back even further let's render this
piece of the store State and as long as
you did a good job coding and you never
changed your actual object but you
always created a new one that's going to
work flawlessly that's going to work
very well so that's Redux in a nutshell
that's going to help you understand it a
lot more as we get into the code I'm
going to go to put together and
immutability in JavaScript video for
those of you guys who don't know what
that is and then we'll get into coding
redux