Multiple Reducers with Redux Reducers - Redux React Tutorial #4 Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

so right now we have a basic basic basic
Redux application we have a really
simple reducer in a store with just one
value for data but that's not really a
real-world example because an
application has much more than one piece
of data for its values you'll have an
object that has much more information to
it so say you have a user my name is
will
ages 35 get up there and then tweets
will be an array of tweets and so you'll
want to now at this point act off of
multiple pieces of information and you
absolutely don't want one gigantic
reducer because that'll be just a mess
to maintain so we're gonna actually
combine multiple reducers that can be
broken up into their own files so let's
pull in combined reducers from redux and
then let's actually create multiple
reducers here so let's create user
reducer let's pretend this is in its own
file and then this will receive state in
actions and we can make this an arrow
function there we go so there's my user
reducer and then let's create a tweets
reducer as well so that's in its own
file now we can combine those let's say
then there's a third file index J S or
something and that imports both of them
and creates a reducer console reducer
equal combined reducers and then we're
going to pass that an object and the
objects are going to basically say what
piece of data are we modifying this case
user and which reducer function is going
to handle that the user reducer so now
what's something really cool is going to
happen when the user reducer file
fires state right here will be this user
object so it will only be able to act on
that user object whatever it returns
gets set as the new value for the user
piece of the state when the tweets
reducer fires it receives whatever is
set in tweets as state and whatever
returns gets set as state again
and so when you move
two combined reducers and make sure I
actually change this to reduce Erza then
you don't set your default values in
here anymore you set your default values
in here which is also night so nice so
your default values are now set using
es6 and default values or however you
want to handle it the user reducer right
there state equals let's go name you
know I just want I just won't pass
anything but default that's just gonna
be an empty object you can set a lot of
default values here or you can set some
kind of default values up here and then
you just make sure your return defaults
or modify defaults at any rate you
always have to return something in these
functions so we're going to return state
by default so at the very least we're
going to return empty brackets if no
state gets passed in the first time I
hope that made sense you'll basically
get errors if a reducer ever returns
nothing that's going to cause problems
so we've got our user reducer and then
tweets is going to fire the tweets
reducer and there's our set up now for
multiple pieces let's go ahead save and
then we got a bunch of store change but
nothing happens you can see tweets is an
empty object and users and empty object
and tweets actually needs to be an empty
array there you go tweets us an empty
array so now ever let's make sure that's
right yep tweets is an empty array users
an empty object so now we can actually
fire some things off we can change user
change user and the payload will be
we'll make that change name change name
and change age
will change the h35 and now the user
reducer can do a switch statement or if
else statements whatever it wants to do
to modify that state we'll do a switch
this time I think it's cleaner and then
let's do a change age as well so we got
changed name change age I accidently
made that actions didn't I let's make
that just action fix that there as well
so the name is going to be the action
payload if the action type is changed
name this should look pretty familiar
now if you've done flux of any kind and
then state age there we go so now we
should be able to set our name and our
age let's look at this and see what we
got we got a user age is 35 name is will
excellent but we got a problem here
let's look back at this previous
modification we made and the users age
is still 35 now wait a minute we did not
set the age yet how come the age is set
here because what we're actually doing
is bad we are changing this we are
mutating the state object and returning
the exact same state object instead we
want to never ever ever ever mutate the
state object instead we always return a
new state object now you could do this
in a couple ways you could go new state
equals state and then we modify that
object and we always return new state
this approach definitely works but I
think the better approach is to make
sure that where you're modifying the
values you simply make sure to do it in
an immutable fashion so let's go and
change this to state and then I would do
this instead I'd say state equals so
we're going to completely overwrite our
state object we're going to pull in all
the values from state as it is and then
name is going to be action dot payload
that will work now if you put dot dot
state afterwards that will not work
because we're
to set the name and then we're going to
overwrite the name with what it's
currently so you always want to make
sure your destructuring happens at the
beginning so you can overwrite the name
value so there we go and let's go and do
the exact same thing with age there we
are and so this will work so we can go
ahead store changed let's look at our
user age 35 and our previous one no age
at all excellent
so then next year when I change my age
to 36 we have 34 nope nothing sorry 35
and 36 and what's excellent about this
again is this user reducer is not aware
of the tweets portion of the data it
can't change the tweets portion of the
data absolutely nothing can happen now
the tweets portion of the data could act
on the change name event this change
name event might have consequences for
both the user state and the tweet state
maybe we have to go through every tweet
and change the user name totally fine we
can do that we can also switch based off
of change name and modify the tweets
portion of the state so one action can
trigger multiple multiple side effects
that are all completely decoupled from
each other
so that's how you break stuff apart and
if you were to actually move this into
files this would become a file for user
reducers this would become a file for
tweets reducers and then where you
bootstrap your store this would all
happen in one file as well so that's how
you combine multiple reducers into one
let's look at the next big piece of
redux and that's middleware