Eh, React is 5 years old. I've been writing it professionally for 3. I'm not worried.
And honestly -- React doesn't have the same pain points jQuery/Backbone/Angular1 did where I couldn't wait to move on after 6 months. We'd have to see an absolutely massive paradigm shift before I'd regret writing my apps in React.
I would argue React will be around a while for two reasons:
- The core language has gotten a lot better with ES5+ features. Async, fetch promises, etc., are all now built-ins on modern browsers, and have learned lessons from the pain points the initial implementations in libraries like jQuery.
- React itself is only a view layer with minimal concern about the form of your data -- you can use an array of other libraries on top of it to help with shared states, network requests, etc.
Will someone come along and do a view layer better than React? Probably. Will it be as big of a leap as what we've seen over the past few years with ES5/6/7 & React? I don't think so.
No, you're probably in the majority. The problem isn't really the core concept of Redux, but needing to integrate the whole ecosystem around it - thunks, sagas, selector library, various other middleware.
Not OP, but my day to day job is helping teams with their migration onto React (often for big sites you've used or have at least heard of). Here goes, although these probably aren't anything new to you:
– As far as I understand, Redux was intentionally made to be low-level and unopinionated, with the idea that other libraries would build on top of it. That has not really borne out and it actively makes adoption extremely painful. Everyone just uses Redux directly in their apps. As a result, adopting Redux on every team I've ever been on has been a painful process of figuring out how to fill in the blanks that Redux left out. Like how to handle async actions and side effects, how to name action creators, where to put connect()ed components, etc. And the result never feels great.
– Related to the above: it's extremely telling that I can't name a single library of reusable Redux actions/reducers/etc. Despite attempts to define things like "ducks", and there being hundreds/thousands of reusable React components published, there are none for Redux that anyone has ever paid any attention to. Because of the batteries-not-included philosophy, you pretty much just can't share your Redux code, because different apps might be building on vanilla Redux in too disparate a fashion with whatever middleware they chose. That's why I'm expecting the new Context API to displace a fair amount of Redux usage: because publishing reusable Context libraries is going to be brain-dead simple compared to reusable Redux.
– Developers just don't get what they should connect() and how to design their components, and Redux doesn't really offer them much guidance. As an example, every single day I have to mention in code reviews that something like a "loadProducts" prop does not make any sense on something like a "SearchButton" component, just because our Redux action happens to be named "loadProducts" – an "onClick" prop that just happens to be mapped to "loadProducts" in connect() makes much more sense. But devs are lazy and just end up giving components a bad design with a bunch of props that wouldn't make sense if Redux were not involved. Most of my code reviews contain the words "design your component's API without even thinking about Redux yet!"
There are more, but those are the main issues. btw, thanks for all the hard work you do!
I'll be honest and say that a lot of those concerns seem like things that Redux couldn't possibly have any solutions for. How can the core library tell you "what to name action creators" or "where to put connected components"? Those are style guide / app architecture concerns that are going to be specific to each team.
FWIW, there _are_ a lot of chunks of reusable Redux-based logic out there (which I have listed in my Redux addons catalog [0]), but I'd agree that there does tend to be enough variation in people's use of Redux that sharing larger chunks can be difficult. I've seen quite a few experiments with various forms of Redux "modules", but yeah, none of them have fully taken off. There _are_ several very interesting higher-level wrappers around Redux that look like they offer potential solutions to the reuse / structure question, like Kea, Rematch, and redux-bundler.
While I sort of understand the concern in your last paragraph, I'm again not sure what sort of "guidance Redux could offer" in this case. If you've got suggestions for improving the docs, please file an issue, or even better, a PR, and we can work to get something in.
> Those are style guide / app architecture concerns that are going to be specific to each team.
Exactly, but it's Redux's fault that it actively adds like 5 new styleguide/app architecture concerns to worry about in your project! That is a bad thing about its fundamental design.
For crying out loud, just put redux-thunk back in the core library. Nobody doesn't have async actions! One less thing to make a decision about.
> While I sort of understand the concern in your last paragraph, I'm again not sure what sort of "guidance Redux could offer" in this case.
I find that response pretty obtuse. I just told you what I told my developers in their code reviews, how about some language like that? Developers don't realize that connect() is just dependency injection for props, and those props should at least make sense from a dumb-component standpoint before Redux is involved.
Or how about including a render-prop version of connect in the library, so developers don't go making a bunch of useless props in the first place? The HOC version is what is leading them towards poor design decisions.
If your library is too easy for average devs to use poorly and my biggest headache during code reviews, to me that points to some issue with the library. This is why there is often "backlash" type sentiments around Redux being so popular.
FWIW, I've put together a small "starter kit" lib that's intended to simplify some of the process around setting up a Redux store [0] . We do include redux-thunk by default there, as well as Immer for simplifying immutable updates in reducers. It's still a personal-scoped package atm, but longer-term we'd like to make it an official Redux-branded addon.
I'm serious about the request for a docs PR. I'll agree that our docs are currently a bit weak on "real-world" app architecture instructions. If you feel there's specific advice that should be in there, _please_ file a PR! I'm already swamped with other things on my task list, and simply don't have time to add major new sections to the docs myself right now. I keep begging the community for help improving the docs so we can make things better for everyone, and I have a bunch of open issues tagged "docs" I've been trying to get help with, yet we get almost zero actual meaningful contributions.
I'm not sure how HOCs vs render props "leads people to make poor design decisions".
The Redux team's main focus in the near future is figuring out how to update React-Redux to better work with the upcoming async React rendering capabilities [1]. We've got a couple open PRs atm, one that's trying to fix the "strict mode" warnings [2], and one I did a few weeks ago that experiments with using the new context API for better compatibility [3]. The immediate goal is to keep the public API the same to provide basic compatibility with async React behavior, but longer-term, we may have to rethink the API to fully take advantage of what React can do. We aren't planning to add a render props API right now, but that could be on the table for a v6 API change in the future.
Again, right now there's two primary maintainers: myself, and Tim Dorr. Both of us are doing this in our spare time, and there's only so much we can do. If you're using Redux, and you feel there's deficiencies in the docs or how it's being used, don't just complain - _please_ offer some help so the community can benefit!
> I'm not sure how HOCs vs render props "leads people to make poor design decisions".
This surprises me.
A render prop doesn't force any particular component interface. You just get a function and do whatever you want with the arguments (including just passing them along as props to another component, if you want).
HOCs force all the stuff you want to pull out of state to be passed as props, even if those props are not the ideal interface for the component you're wrapping, and they output a new component that you have to use instead of the original. Combined with derived state like reselect, this can lead to very weird component props that you'd never even consider if you were just designing a dumb-component without consideration for Redux.
Honestly, I've never used render props yet myself, for a variety of reasons, so I just don't have the experience to understand your concerns there.
As I said: if you have specific concerns that you think can be resolved by changes in the docs or the Redux/React-Redux libraries, please file an issue so we can discuss them in more detail.
I am new to React and Redux so I might not have a well informed opinion. Also, I see the value of Redux and I use it in my projects.
But it's awkward setting up a global event handler with switch statements. And it seems like adding new functionality should require one step instead of three (updating a reducer file, updating an action file, and updating mapStateToProps).
It's like Redux operates on a different paradigm than Javascript and React. I do not think I'm knowledgeable enough to suggest any solutions.
You might want to read Dan Abramov's post "You Might Not Need Redux" [0] and my own post "The Tao of Redux, Part 1 - Implementation and Intent" [1] to better understand the tradeoffs involved.
I've been using redux-zero on my latest projects with reasonable success. It does away with the distinction between actions and reducers, so you're basically just calling functions that update the app state.
This eliminates almost all boilerplate-ish code compared to redux, but it comes with its own caveats. I think it's a solid choice for small to medium size applications.
I created my own library after finding redux boilerplate heavy.
I haven't publicized it yet, but you can see it here - https://github.com/gunn/pure-store
It supports full typescript typing, and uses Immer to allow very direct store updates with immutability.
I find conceptually Redux is straightforward enough, just really wordy. I think perhaps if I got to choose again I might consider Mobx. I still use it for my react stuff but most new stuff I'm using Vue.
Mobx and Redux have slightly different use cases, IMO. I prefer Redux for larger projects and Mobx for smaller ones, though I've only used Redux in production so far.
The best if you learn and practice the following four libraries and frameworks: React, Ember.js, Angular, Vue. You will see different concepts and you gonna be a real professional frontend dev. For example, you can create a simple interface or widget with React, but if you have to develop a complex big web application, Ember or Angular is a better choice. Most of these frameworks have great support, community and matured. Learning Ember is so easy as React: http://yoember.com
And honestly -- React doesn't have the same pain points jQuery/Backbone/Angular1 did where I couldn't wait to move on after 6 months. We'd have to see an absolutely massive paradigm shift before I'd regret writing my apps in React.