►
From YouTube: An attempt at simplifying Redux - Alexander Pittendrigh
Description
Redux is a seemingly complicated stage management tool, but it doesn't need to be. Together we will attempt to break Redux down to a simpler form, so that the lifecycle is almost transparent. Redux can easily be used with React, Vue, and Angular, so we'll look at testing, some of the side effects of Redux, some of the things you shouldn't do.
This talk was recorded at the Jozi.JS meetup group on the 24 May 2018.
https://www.meetup.com/Jozi-JS/events/249460222/
Disclaimer: The opinions in this talk are those of the individual and do not necessarily represent those of this channel, the meetup group, or it’s sponsors.
A
I've
talked
about
Redux
I,
think
it's
kind
of
old
news,
but
it
is
still
quite
relevant.
It's
been
around
for
four
years
and
there
was
actually
recently
in
a
bit
release
port.
But
if
you're
working
at
a
big
company,
you
might
find
yourself
working
on
an
old
project
and
you
have
to
learn
to
use
redux
or
if
you're,
starting
a
new
project,
you
might
decide
to
use
relax
because
the
benefits
that
it
gives
to
your
projects
are
still
relevant.
A
So
it's
worth
learning
something
in
my
time
it
intellect
I've
taught
of
proximately
ten
people,
perhaps
more
how
to
use
redux
and
everybody's
always
like
it's
black
magic.
This
is
witchcraft,
I,
don't
understand
what
even
is
this
like,
etc,
and
somebody
that
I
recently
started
working
with
recent
graduate
I
like
what
them
carefully
learn.
Redux
and
I
tried
to
figure
out
what
was
confusing
and
for
those
of
you
that
know
how
Redux
works.
I
think
that
the
separation
was
between
dispatching
and
action
and
seeing
how
it
changes
your
store.
A
A
It
is
based
on
something
who
that
was
made
by
Facebook
and
the
guys
who
made
react
specifically:
Dan,
Abramov,
sorry,
the
it's
based
on
the
flux
pattern
and
there
are
variants
of
it
in
other
Popular
Front
in
frameworks
like
angular
1,
is
called
ng
oryx,
there's
a
variant
of
flux
in
vu
and
obviously
there's
react
Redux.
So
redux
is
a
standalone
thing
and
react.
Redux
is
what
you
use
to
connect
the
redux
store
to
your
react
application.
A
So
why
do
we
need
to
change
the
way
we
store
a
state?
It's
because
traditional
state
management
is
hard
and
often
it's
because
we
work
with
objects
and
objects,
not
pure,
and
it's
difficult
to
test
those
objects,
because
it's
difficult
to
set
up
the
test
state
and
it's
difficult
to
sort
of
determine
how
those
objects
work
with
each
other.
Are
they
music
mutating?
Each
other
are
they
doing
things
that
we
don't
know
they're
doing
and,
as
you
add,
more
models
and
controllers
and
views
to
your
application.
A
Everything
changed
everything
and
it
becomes
impossible.
So
the
flux
patent
comes
along
and
we
borrow
stuff
from
functional
programming.
We
say
that
every
single
state
mutation
must
leave
the
previous
state
as
it
were
and
provide
us
with
a
new
state
with
new
changes
a
little
bit
of
history
about
this
patent.
It
was
invented
by
Facebook
as
well.
A
So
they
figured
out
that
they
could
solve
this
problem
by
introducing
uni-directional
data
flow.
So
every
thing
that
consumed
State
in
your
application
only
receives
that
from
one
place
and
there's
only
one
way:
it's
mutate
State,
you
just
patch
something
called
an
action
which
is
a
plane
object
and
it
has
some
metadata
and
whatever
consumes
that
action
knows
what
to
do
it
and
no
sorry
mutate
State.
So
immediately
we
have
like
a
clear
separation
of
concern,
our
view
and
controller.
Don't
need
to
worry
about
how
to
imitate
state.
A
All
they
need
to
do
is
tell
the
the
dispatcher
that
something
happened.
This
is
like
classic
event-driven
stuff
and
it's
really
effective,
so
it
scales
super
well
as
well.
As
you
add,
more
consumers,
you
still
only
consume
state
from
one
place,
so
flux
allows
for
multiple
stores,
but
Redux
advises
that
you
don't
because
it
just
becomes
very
difficult
to
manage.
So
just
to
recap:
indirection
set
the
flow.
Every
single
state
change
only
has
one
traceable
event.
This
makes
it
easier
to
debug
the
action.
Handlers
are
synchronous,
so
that
makes
working
with
them
easier.
A
Inversion
of
control
is
like
a
natural
side
effect
and
the
action
handle
is
up
here,
they're
easy
to
test
as
well,
because
the
peer,
so
what
I
would
like
most
about
this
is
that,
normally,
when
you
test
your
components
in
a
website,
say
you
were
working
with
like
angularjs.
The
only
way
to
see
that
what
you
did
did
something
to
your
website
was
to
look
at
the
changes
in
the
Dom,
which
kind
of
sucks.
A
So
now
that
everything
is
in
the
state
containers,
you
dispatch
an
action,
you
get
a
new
state
and
if
it's,
what
you
expect,
the
test
passes
super
simple
cool.
So
this
is
how
Redux
looks.
It
is
not
a
like
word-for-word
implementation
of
the
flux
pattern.
It
is
a
variant
of
it,
the
derivative
and
it
looks
very
similar.
So
each
of
your
components
in
your
react.
Application
consumes
State
that
is
given
to
it
by
the
Redux
store.
The
Redux
story
is
given
to
each
component
by
react,
Redux
and
it's
a
wrapper
of
your
whole
app.
A
So
if
you
want
to
change
something
in
the
state,
you
call
something
called
an
action
creator
which
dispatches
in
action.
The
reason
that
you
need
to
call
an
action
creator
is
because
an
action
is
a
plane
object
and
if
you
need
to
put
little
information
into
the
action,
you
need
something
to
create
the
object
to
give
that
information
to
the
dispatcher.
A
So
after
the
action
reaches
the
dispatcher,
this
dispatcher
sends
the
store,
the
current
state
and
the
action
to
the
reducer.
The
reducer
knows
what
to
do
with
the
action.
If
it
wants
to
do
anything
at
all,
and
then
it
sends
a
changes
down
to
the
components
from
the
store
cool.
So
at
this
point
you
might
be
wondering
what
hell
is
a
reducer.
A
So
if
you
have
ever
used
JavaScript,
you
might
have
encountered
the
math
function.
We
take
an
array
and
we
call
that
map
on
it.
There
are
other
implementations
of
map
like
lodash
and
Miranda,
and
what
the
map
function
does
is
accept
the
function
and
then
what
it
gives
to
that
function
is
every
element
in
the
array
one
by
one,
and
then
it
does
something
with
that
element,
and
it
gives
you
a
new
array,
one
element
for
every
element
that
it
was
given.
A
So
if
I
cancel
that
log
bigger
numbers,
I
get
everything
plus
one
cool
you
go
so
now
we
look
at
reduce,
reduce,
operates
similarly
to
map.
But
it
accepts
two
arguments:
it
accepts
a
function
and
it
accepts
an
original
value.
I
think
it's
also
called
the
accumulator
I
think
might
be
wrong
and
then
the
function
that
you
give
to
reduce
accepts
the
element
and
the
current
accumulated
value.
A
So
if
I
want
to
sum
all
the
values
in
my
array,
I
just
add
the
current
element
to
the
Sun
and
one
plus
two
ously,
so
they
go
and
it
works
in
node
as
well
cool.
So
this
is
a
reducer,
and
this
is
like
not
from
the
source
code
for
redux.
It
is
me
trying
to
explain
in
really
simple
terms
how
the
reduces
work
so
somewhere
in
the
dispatch
action.
There
is
a
collection
of
reducers
and
we
reduce
over
all
the
reducers,
giving
each
reducer
the
state
and
the
action
so
over.
A
Here
is
our
reduced
function
and
there's
the
current
state,
which
is
also
what
we
are
using
as
the
accumulator.
So
then,
for
each
reducer
we
provide
the
action
and
the
store,
and
then
in
the
yes,
sir
itself,
we
so
in
relax
is
a
a
paradigm
of
each
action
having
a
type.
Your
actions
are
not
actually
valid
if
they
don't
have
a
type
and
they're
used
to
tell
every
single
reducer
what
kind
of
action
is
being
dispatched
and
every
reducer
only
knows
how
to
do
something
with
an
action
that
it
wants
to
do
something
with.
A
So
if
I
know
how
to
do
something
with
the
action,
then
I
do
something.
If
I
don't
know
how
to
do
something,
then
I
return
the
current
state,
and
that
is
also
something
that
you
have
to
do
in
redux.
If
you
don't
do
that,
you'll
you'll
have
lots
of
trouble
in
your
console
cool,
so
just
over
here
all
the
talks
that
I've
heard
before
I
add
on
to
that.
The
intellect
challenge
talk
that
was
just
given
and
my
talk
and
then
I
create
a
new
object.
So
so
this
is
another
rule
with
redux.
A
If
you
want
to
change
state,
you
have
to
create
a
new
object,
it
has
to
be
pure
and
a
nice
side.
Effect
of
this
is
that
it
works
well
with
react
if
you've
ever
used
react.
You
know
that
if
you
just
modify
a
property
on
an
object,
nothing
happens
because
it
doesn't
know
that
the
state
has
changed
and
react
only
renders
your
components
when
the
state
changes
so
I
want
to
stop
now
and
show
you
a
demo.
I
have
put
like
a
little
spin
on
the
classic
to
do.
A
A
A
Log
I
have
two
action
log,
not
because
I
need
it,
but
because
I
want
to
show
you
that
every
single
reducer
receives
every
single
action
and
the
the
action
log
only
mutates
the
action
log
property
on
the
store
and
the
to
do
only
taste
the
to
do
property
on
the
store.
This
is
like
super
important
I
spent
more
than
like
three
hours
figuring
this
out
the
first
time.
I
did
Redux
and
it
was
painful.
A
So
then
I
import,
the
provider
from
react,
Redux
and
I
create
the
store,
and
over
here
I
give
the
provider
my
store
and
I
wrapped.
My
app
in
the
provider,
so
the
provider
is
the
link
between
the
store
and
app
so
I
figured
out
the
J's
and
I
go
to
the
bun
of
the
file.
You'll
see
these
things
I
also
like
to
think
of
Redux
as
a
glorified
observer
pattern.
A
A
A
A
A
A
A
So
I
can
click
on
this
and
complete
stuff
and
all
the
while
that
this
has
been
happening.
My
console
is
being
spammed
because
every
single
action
is
going
to
every
single
place.
So
this
is
one
part
of
removing
the
abstraction
it's
just
a
reduced
function,
so
the
next
part
is
okay.
Now
I've
seen
out
to
dispatch
actions
and
I've
seen
how
to
consume
them,
how
do
I
consume
the
new
stole.
A
A
A
So
map
stated
props
takes
the
state
of
the
reduces,
have
done
this
thing
and
I'm
using
year
six
here
to
do
structure
the
state
so
I'm
taking
the
action
log
from
this
door,
so
we're
seeing
that
I
have
both
that
to
do
a
piece
of
store
and
action
or
piece
of
store
components.
Get
everything
reduces
only
get
the
slice
that
is
pertinent
to
them
and
then
I
have
all
the
to
dues
and
now
I
want
to
show
you
what
happens
when
I,
when
I
get
that
back
medal
victory.
A
Click
on
that
hits
the
reducer
first,
some
set
mutation
happens,
it's
the
other
reducer
then
comes
back
and
I
have
any
state
simple.
The
only
black
magic
now
is
what
happens
after
I
finished
mutating
state
and
between
when
it
gets
here.
That's
it
so
like
for
me
that
really
makes
everything
simpler
and
easy
to
understand.
I.
A
Cool
so
we've
covered
this.
Take
an
action
turn
in
your
state.
The
replication
state
is
always
a
reduction
of
what
comes
from
all
your
reduces
each
reducer
enemy
works
on
a
subset
of
the
global
state,
just
to
recap
so
wrap
the
app
then
dispatch
actions
through
action.
Creators
forget
that
and
tell
you
restarts
on
your
actions,
handle
your
actions.
So
this
is
the
to
do.
Reducer
and
I've
used
rounder
Redux
players
really
well
with
pure
function,
pure
functional
libraries
like
Rand
and
lodash,
and
it
also
works
super
well
with
immutable.
A
A
A
A
So
the
I
have
some
best
practices
here,
stuff
that
has
bitten
me
and
stuff
that
I
know
yeah.
The
reducers
must
always
be
pure.
There
is
a
thing
called
reduce
a
composition
which
I
haven't
covered
here,
because
I
don't
want
to
go
too
deep
and
lose
people
you
can,
from
your
reducer,
send
the
action
to
another
reducer
and
have
that
sub
reduce
deal
with
the
small
fraction
of
the
state.
A
This
helps
you
deal
with
like
just
making
sure
that
things
that
have
similar
concerns
are
kept
in
the
same
file
and
dealt
with
by
the
same
sub
reducer.
Even
though
the
state
still
becomes
part
of
the
parent
state.
There
is
a
paradigm
to
name
each
action
now,
an
underscore
verb.
So
to
do
add,
this
object
create
namespaces
in
a
sense.
So
if
you
ever
need
to
do
something
like
copy
all
your
actions
and
duplicate
them,
it's
easy
to
do.
A
You
can
just
rename
them
all,
and
there
is
a
thing
called
create
reducer,
which
you
give
an
object
with
all
your
functions
and
it
creates
the
release
of
function.
For
you,
that's
really
useful.
It
helps
avoid
a
lot
of
the
boilerplate
that
makes
real
acts
painful
because
well,
it
is
great
there's
a
lot
of
pain
for
every
single
action
you
want
to
dispatch.
A
You
have
to
change
like
four
pieces
of
code,
so
we
don't
always
deal
with
synchronous
stuff
and
you
don't
want
to
bring
promises
and
Ajax
calls
and
that
sort
of
stuff
into
your
store
it's
going
to
mess
with
the
purity
of
your
store.
So
there
are
things
called
redux,
there's
a
logical,
relax
stunt
which
is
fantastic
and
you
can
use
it
to
create
asynchronous
actions.
So
you
create
an
action
which
wraps
dispatch
and
you
return
that
function
and
then,
from
there
you
dispatch
the
actions
as
soon
as
your
asynchronous
call
comes
back.