Ask HN: I get React but not Redux
6 comments
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/
[0] https://mobxjs.github.io/mobx/
[1] http://www.robinwieruch.de/redux-mobx-confusion/
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".
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".
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.
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...
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...
The reddit comment by Dan Abramov is indeed useful. Thx
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:
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.
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());
}
};
}
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.
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());
}
};
}
Stephen Grider's udemy course on react & redux is awesome. https://www.udemy.com/react-redux/
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 ?