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 ?
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.
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());
}
};
}
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".
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...