Ask HN: I get React but not Redux

https://news.ycombinator.com/item?id=13200874

by codegeek • 10 years ago

7 9 10 years ago

news.ycombinator.com

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.

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 ?

al2o3cr• 10 years ago

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• 10 years ago

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

ess3• 10 years ago

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.

acemarke• 10 years ago

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...

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

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

[3] https://github.com/markerikson/redux-ecosystem-links/blob/ma...

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

codegeek• 10 years ago

The reddit comment by Dan Abramov is indeed useful. Thx

eiriklv2• 10 years ago

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.

eiriklv2• 10 years ago

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• 10 years ago

Stephen Grider's udemy course on react & redux is awesome. https://www.udemy.com/react-redux/

rwieruch• 10 years ago

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/

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

Ask HN: I get React but not Redux

Related Stories