
Ask HN: I get React but not Redux - codegeek
Just playing around with React only took me a day or so to get a good grip on the concepts. But then I started looking into the whole flux architecture and I am confused. Reducers ? WTF is that.<p>I understand that you can build stuff in React only without redux but is it viable for larger apps ? Has anyone built an app in production that runs without Redux etc and is of decent size ?
======
eiriklv
Redux can come off as a bit intimidating, but fortunately builds entirely on
old ideas and concepts like publish/subscribe, reduce/fold and pure functions
that takes a value + an event and returns a new value (reducer function).

Without the middleware support Redux pretty much boils down to this:

    
    
      function createStore(reducer) {
        let state = undefined;
        let subscribers = [];
    
        return {
          getState() {
            return state;
          },
          subscribe(subscriber) {
            subscribers.push(subscriber);
          },
          dispatch(action) {
            state = reducer(state, action);
            subscribers.forEach(subscriber => subscriber());
          }
        };
      }
    

The advantage of Redux will start to show itself first when your app grows
larger and you start doing things like consuming many different
views/derivatives of the same state (using selectors) spread across your
application.

Redux (core) doesn't actually solve the other big complexity culprit of big
web applications though - asynchronous flow and side effects. For that you'll
have to look into middlewares like redux-thunk or redux-saga, depending on
your needs.

I'd suggest that instead of focusing on specific implementations such as Redux
it's a good idea to take a look at those concepts + patterns like CQRS to get
an understanding of why you'd want these things in the first place.

It's usually a good idea to feel the pain it alleviates before diving in at
the deep end.

~~~
eiriklv
An alternative thought model of Redux could be represented like this:

    
    
      function createStore(reducer) {
        let actions = [];
        let subscribers = [];
    
        return {
          getState() {
            return actions.reduce(reducer, undefined);
          },
          subscribe(subscriber) {
            subscribers.push(subscriber);
          },
          dispatch(action) {
            actions.push(action);
            subscribers.forEach(subscriber => subscriber());
          }
        };
      }
    

If you start out by digging into how Array.reduce works you're 90% there,
which is where the name "Redux" comes from.

------
ericlamb89
Stephen Grider's udemy course on react & redux is awesome.
[https://www.udemy.com/react-redux/](https://www.udemy.com/react-redux/)

------
ess3
Redux and Flux is just one way of handling state in your application. I find
it especially useful for storing entities from the backend but personally I'm
not really storing that much UI state in my redux store. Coming from a large
scale angular project Redux makes handling resources from the backend a breeze
reg. caching and invalidation.

------
al2o3cr
YMMV; the company I work at recently hosted a talk by Pete Hunt (OG React guy)
who recommended people _not_ use React.

I will say that if your team doesn't understand & internalize the assumptions
of Redux it produces the worst highly-coupled spaghetti I've ever seen, spread
over dozens of directories and "components".

~~~
iorekz
Not to use react or redux ? What alternative did he propose ?

------
rwieruch
A lot of people already answered your question regarding Redux. I want to
mention MobX [0] as an alternative to deal with state management. I have
written an article about the differences of Redux and MobX and the road to
learn state management in React [1].

[0] [https://mobxjs.github.io/mobx/](https://mobxjs.github.io/mobx/)

[1] [http://www.robinwieruch.de/redux-mobx-
confusion/](http://www.robinwieruch.de/redux-mobx-confusion/)

------
acemarke
Hi. Dan Abramov, the author of Redux, wrote a short, simple explanation of
what Redux is ([0]).

Another way that I like to describe it: Redux is a small wrapper for storing a
single variable (usually an object). You provide a function with all the logic
for updating that value, and Redux will call your function with the old value
and some info on what just happened (also from your own code). Redux saves the
new result, and acts like a simple change event emitter, letting any
interested code know that something just changed.

The term "reducer" is because the function you provide to Redux acts like the
callback you would pass to `Array.reduce()`, which takes in the old value and
current item as arguments, and returns a new value.

Got a few more links for you. First, I keep a big list of links to high-
quality tutorials on React, Redux, and related topics, at [1]. Specifically
intended to be a great starting point for anyone trying to learn the
ecosystem.

Second, Dan Abramov has a couple video tutorial series that walk you through
the basic ideas of Redux step by step ([2]). You should definitely watch
through those.

Third, I have a list of some selected real applications that have been built
with Redux ([3]). One of the categories in my React/Redux links list has a
bunch of "best practices / lessons learned" articles ([4]), which are also
based on the experience of real companies that have used Redux to build real
products. To name a few random examples: Mozilla is using Redux in Firefox's
Developer Tools; Wordpress is using it in their new admin UI; Twitter uses it
in their mobile site; and many more.

Hopefully that helps!

[0]
[https://www.reddit.com/r/reactjs/comments/4npzq5/confused_re...](https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/d46k2bl/)

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

[2] [https://egghead.io/series/getting-started-with-
redux](https://egghead.io/series/getting-started-with-redux)

[3] [https://github.com/markerikson/redux-ecosystem-
links/blob/ma...](https://github.com/markerikson/redux-ecosystem-
links/blob/master/apps-and-examples.md)

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

~~~
codegeek
The reddit comment by Dan Abramov is indeed useful. Thx

