
How Redux Works: A Counter-Example - kiyanwang
https://daveceddia.com/how-does-redux-work/
======
robmcm
There is a certain paradox with teaching something like Redux, in that it's
designed to make complex systems easy to understand and manageable. Yet when
trying to demonstrate with a simple example, it appears hugely over complex
and unnecessary.

I think a pre-requisite to learning something like Redux (or any micro-
architecture) is to first try building something without it. Once you
understand the pains of undisciplined, organically designed, spaghetti
applications, the cynicism is replaced by excitement over how this will
improve your job/life/application.

~~~
ryanbrunner
I think there's a fair criticism of Redux in here - most well designed tools
can accomodate a learning curve, and scale up the complexity when needed. I
can be productive in Express without knowing about middleware, or git without
knowing how to rebase.

Redux, on the other hand, expects you to dive into the deep end head first the
first time you use it. I teach javascript development, and I'm noticing
there's a pretty big gap where you're feeling the pain of React, but Redux is
still too large a complexity tax (To be fair, even to an experienced
programmer it often is - for every complex state change that warrants Redux
there's 50 straightforward "change this field" or "toggle this boolean"
actions.)

Maybe this isn't the responsibility of Redux, and something should be built on
top of it, but there needs to be some amount of consensus on what the best
solution is.

~~~
dceddia
The Redux learning curve is tough, especially for folks who don't already have
a strong grasp of functional programming ideas. Immutability is weird.
Breaking everything up into multiple places (dispatch, actions, reducers) is
weird. Like you say, it's unfortunate that one must basically learn _all of
it_ to get started using Redux. It does do a nice job of solving difficult
problems though.

> there needs to be some amount of consensus on what the best solution is.

The thing is, there _is_ consensus: it's Redux. I'm not saying that's good or
bad, but it's king of the state management hill right now.

What's really interesting to me is that the JS community is largely allergic
to anything that isn't the "best solution". Nobody wants to use a little
library with 53 stars on Github, even if it's easier, or seems like a better
fit than Redux. The thinking seems to be "It's not any good unless it's the
most popular choice." Those sorts of libraries might be ok for proof-of-
concept work, but not for the real world. Not for production.

What drives this line of thinking? I think it's complex, but I believe fear
plays a big role.

\- Fear of choosing the wrong library (what if it becomes unpopular!)

\- Fear in one's own abilities to evaluate a library ("it seems fine to _me_ ,
but I'm no authority, I can't make that call")

\- Fear of looking bad to the boss ("Nobody ever got fired for buying IBM",
right? React + Redux has that spot right now)

There's also the self-reinforcing nature of a popular thing: companies using
Redux => job listings require Redux => people want to learn Redux => people
make Redux courses/books/blogs => people don't teach the alternatives.

~~~
ryanbrunner
There's consensus on Redux - that's not what I'm talking about. There seems to
be a fair amount of desire for something that simplifies "straightforward"
state management. The Redux maintainers don't seem to be interested in this,
preferring it to be something created by the community. As far as I can see
though, no one is filling that gap.

~~~
acemarke
I'm a Redux maintainer, and I'm _absolutely_ interested in making it easier
for people to get started with Redux. I opened up an issue thread earlier this
year to get community feedback and ideas on how we can do that:
[https://github.com/reactjs/redux/issues/2295](https://github.com/reactjs/redux/issues/2295)
.

We don't plan to modify the Redux core itself, but I would _love_ to be able
to list some tools as "approved" or "blessed" ways to get started easier.

Sadly, I just don't have enough free time to go build much of anything like
that myself, but I will happily work with anyone in the community who's
interested in doing so.

I also hope to revamp the Redux docs "Ecosystem" page to more specifically
point to certain tools as recommended solutions to specific problems, but
again haven't had time to do so yet.

------
arximboldi
Nice thing about this architecture is that it really is agnostic to your stack
and as long as you have some way to build "values" you are good to go.

I have recently been working on a Redux for C++ experimental library with
time-travel and all. As an example I built a mini-emacs text-editor with it.
Should post about it here whenever I flesh out the README and all (or the
MeetingCpp talk about it gets published). In the meantime you might want to
check these links:

The library:
[https://github.com/arximboldi/lager](https://github.com/arximboldi/lager)

The Counter-Example:
[https://github.com/arximboldi/lager/tree/master/example/coun...](https://github.com/arximboldi/lager/tree/master/example/counter)

The text editor: [https://travis-ci.org/arximboldi/ewig](https://travis-
ci.org/arximboldi/ewig)

Show-case of a time-travelling debugger:
[https://twitter.com/sinusoidalen/status/926382341433577472](https://twitter.com/sinusoidalen/status/926382341433577472)

------
dimillian
Switched our entire native app stack to a redux backend (Swift and Kotlin),
never been happier. Sure there is more code in the end, but the decoupling and
simplicity to use is just too good. Especially on iOS when you know how
complex it is to maintain a controller hierarchy with a (now dead) dependency
chain.

~~~
hakonber
Did you use ReSwift and ReKotlin, or something else?

~~~
dimillian
Both :)

------
ergo14
It is interesting how people have the idea that react === Redux/flux. Where in
fact Redux is unopinionated and works with other libraries/frameworks just
fine.

~~~
leshow
How often do you see redux used with anything other than react? Or are you
just talking about redux working with react alternatives like preact/inferno,
etc?

You're not wrong, but practically 99% of people pair it with react.

~~~
acemarke
Redux is actually used noticeably outside of the React community.

Redux can be used with any UI layer, and there's bindings for many frameworks
and UI layers besides React [0].

Redux has picked up popularity within the Angular community, both in its
original form and the NgRx reimplementation. The ember-redux bindings are also
starting to gain a bit of a following. Vue's VueX lib is inspired by Redux,
and there's Vue-specific bindings for Redux itself.

[0] [https://github.com/markerikson/redux-ecosystem-
links/blob/ma...](https://github.com/markerikson/redux-ecosystem-
links/blob/master/library-integration.md)

------
sailfast
I appreciate the author's work to explain this, and I like starting without
Redux as a demonstration - definitely a good idea to figure out what React
does on its own first.

That said, I found the reverse approach to Redux to be more confusing than the
actual Redux documentation and the tutorials that Dan Abramov has already put
together around Redux which explains things quite lucidly.

Example: [https://egghead.io/lessons/react-redux-the-single-
immutable-...](https://egghead.io/lessons/react-redux-the-single-immutable-
state-tree)

~~~
acemarke
Dan's teaching style is very much "from first principles". You can see that in
his Egghead videos, as well as the "Middleware" page in the Redux docs [0].

I've seen feedback that Dan's teaching style is the greatest thing ever, and
feedback that it requires a giant leap of faith that "we write thing A, and
thing B, and thing C, and magically they all work together at the end".
Clearly, different people have different learning styles. Dan and Andrew _did_
try to write the docs in a way that would be accessible for people with
varying backgrounds, but it's tough to write docs in a way that works for
everyone.

If you or anyone else has suggestions for improving the docs, please let me
know! I'm always open to ideas for improvements. Please ping me on Twitter at
@acemarke, or file an issue / PR in the repo.

[0]
[https://redux.js.org/docs/advanced/Middleware.html](https://redux.js.org/docs/advanced/Middleware.html)

[1]
[https://github.com/reactjs/redux/pull/140#issuecomment-11371...](https://github.com/reactjs/redux/pull/140#issuecomment-113716381)

[2]
[https://twitter.com/dan_abramov/status/622568094939090944](https://twitter.com/dan_abramov/status/622568094939090944)

~~~
sailfast
Yeah - I can see that. "It's all functions so it all works" haha. I think the
context setter that helped for me was to see "hey here's what I see with
state, and here's how I think about it and did the thing" at React EU:
[https://www.youtube.com/watch?v=xsSnOQynTHs](https://www.youtube.com/watch?v=xsSnOQynTHs)

------
prabhasp
Like the explanation a lot. Even when you've understood redux, and want to
use, the amount of upfront boilerplate can be a turn off. I liked this
approach of parsing out the boilerplate piece by piece.

------
acemarke
I'm a Redux maintainer, and this is a great introduction to Redux. I love
Dave's ability to break things down into easily understandable pieces, and his
clear writing style.

I also saw a similar "React and Redux: An Introduction" tutorial published
just within the last couple days [0].

For anyone who's looking to learn more about Redux, I'd encourage you to check
out my React/Redux links list [1], which has sections pointing to more Redux
tutorials [2], Redux architecture and best practices [3], and much more.

If you've picked up the basics of Redux and want to see how it works at a
larger scale, I recommend the "Building a Simple CRUD App with React and
Redux" series [4], and my own "Practical Redux" tutorial series [5].

Also, my "Idiomatic Redux" blog series [6] looks at things like the history
and intent behind Redux, common usage patterns and why they exist, and why I
consider certain patterns to be the "right" way to use Redux.

Finally, I am always happy to answer questions about learning and using React
and Redux! Please feel free to ping me on Twitter at @acemarke. Also, come by
the Reactiflux chat channels on Discord [7]. There's always plenty of people
around who can answer questions. I'm usually on there evenings US time.

[0] [http://jakesidsmith.com/blog/post/2017-11-18-redux-and-
react...](http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-
introduction/)

[1] [https://github.com/markerikson/react-redux-
links](https://github.com/markerikson/react-redux-links)

[2] [https://github.com/markerikson/react-redux-
links/blob/master...](https://github.com/markerikson/react-redux-
links/blob/master/redux-tutorials.md)

[3] [https://github.com/markerikson/react-redux-
links/blob/master...](https://github.com/markerikson/react-redux-
links/blob/master/redux-architecture.md)

[4] [http://www.thegreatcodeadventure.com/building-a-simple-
crud-...](http://www.thegreatcodeadventure.com/building-a-simple-crud-app-
with-react-redux-part-1/)

[5] [http://blog.isquaredsoftware.com/series/practical-
redux/](http://blog.isquaredsoftware.com/series/practical-redux/)

[6] [http://blog.isquaredsoftware.com/series/idiomatic-
redux/](http://blog.isquaredsoftware.com/series/idiomatic-redux/)

[7] [https://www.reactiflux.com](https://www.reactiflux.com)

~~~
pookieinc
Is there is a similar repo of links for redux, specifically as it works with
Angular? Thanks!

~~~
acemarke
My links list does have a "Using Redux Without React" category page, which
points to some articles on using it with Angular, Ember, etc:
[https://github.com/markerikson/react-redux-
links/blob/master...](https://github.com/markerikson/react-redux-
links/blob/master/redux-without-react.md) .

That said, I'm already very busy just trying to keep up with the React+Redux
community, and don't have time to keep tabs on everything that's going on in
the Angular world as well. If you do find any kind of similar collection
that's more focused on Angular+Redux, please let me know!

------
kyberias
What language is that in the examples? Yes, I've dropped out of the Javascript
train.

~~~
evan_
It’s ES6 JavaScript, it’s great, and most modern browsers support it out of
the box. You can also use Babel to transpire it into something that’s
supported everywhere.

------
jordache
this is a relatively terrible explanation of redux when compared to this:
[https://code-cartoons.com/a-cartoon-intro-to-
redux-3afb77550...](https://code-cartoons.com/a-cartoon-intro-to-
redux-3afb775501a6)

~~~
acemarke
Lin Clark's cartoons are always excellent, but these articles serve different
purposes. "A Cartoon Intro to Redux" is more about the conceptual aspects,
while Dave's post is both concepts and actual code usage.

~~~
jordache
Dave's post is targeted at 'demystifying'. For this context, Lin's cartoon
explanation excels.

If Dave's post was scoped to optimizing redux implementation, detailed code
samples would be appropriate.

