News for hackers. Stuff that matters.
Re:Learn React by building a web app by txsh on Tuesday April 10, 2018 @04:40PM (#16805121)
I feel this way about React but Redux seems awkward and worthy of replacement. Am I in the minority on this?
Re:Learn React by building a web app by Bizarro on Tuesday April 10, 2018 @07:11PM (#16806492)
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.

Standard redux is just too low-level.

Take a look at Mobx State Tree https://github.com/mobxjs/mobx-state-tree

Re:Learn React by building a web app by rozenmd on Tuesday April 10, 2018 @04:57PM (#16805337)
There are tons of options for State Management before you even need Redux. Check out:

Context API: https://reactjs.org/docs/context.html

Unstated: https://github.com/jamiebuilds/unstated

MobX: https://github.com/mobxjs/mobx

Re:Learn React by building a web app by egeozcan on Wednesday April 11, 2018 @03:24AM (#16808811)
Re:Learn React by building a web app by fouc on Tuesday April 10, 2018 @08:24PM (#16806981)
Meiosis is a simple state pattern, a very elegant approach to handling state: http://meiosis.js.org
Re:Learn React by building a web app by beefalo on Tuesday April 10, 2018 @04:55PM (#16805294)
You are not alone. After trying out GraphQL with Apollo, going back to Redux is painful.
Re:Learn React by building a web app by acemarke on Tuesday April 10, 2018 @05:00PM (#16805374)
I'm a Redux maintainer. Any particular pain points you're concerned about?
Re:Learn React by building a web app by exogen on Tuesday April 10, 2018 @07:48PM (#16806783)
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!

Re:Learn React by building a web app by acemarke on Wednesday April 11, 2018 @10:46AM (#16811569)
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.

Re:Learn React by building a web app by exogen on Wednesday April 11, 2018 @11:36AM (#16812207)
> 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.

Re:Learn React by building a web app by acemarke on Wednesday April 11, 2018 @11:51AM (#16812346)
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!

[0] https://github.com/markerikson/redux-starter-kit

[1] https://github.com/reactjs/react-redux/issues/890

[2] https://github.com/reactjs/react-redux/pull/919

[3] https://github.com/reactjs/react-redux/pull/898

Re:Learn React by building a web app by exogen on Wednesday April 11, 2018 @12:39PM (#16812872)
> 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.

Re:Learn React by building a web app by acemarke on Wednesday April 11, 2018 @01:03PM (#16813169)
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.

Re:Learn React by building a web app by woah on Wednesday April 11, 2018 @09:04PM (#16817210)
The real irony of redux is that most of the project specific customization has to do with dealing with the boilerplate
Re:Learn React by building a web app by txsh on Wednesday April 11, 2018 @11:58AM (#16812426)
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.

Re:Learn React by building a web app by acemarke on Wednesday April 11, 2018 @12:23PM (#16812698)
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.

[0] https://medium.com/@dan_abramov/you-might-not-need-redux-be4...

[1] http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao...

Re:Learn React by building a web app by jetako on Tuesday April 10, 2018 @10:43PM (#16807628)
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.

https://github.com/concretesolutions/redux-zero

Re:Learn React by building a web app by gunn on Tuesday April 10, 2018 @07:58PM (#16806851)
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.

Re:Learn React by building a web app by jamesiscool on Saturday April 14, 2018 @12:01AM (#16835794)
Wow that look amazing, how can I subscribe react to the store? Will each component need something like mobx observer?
Re:Learn React by building a web app by keithnz on Tuesday April 10, 2018 @06:22PM (#16806102)
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.
Re:Learn React by building a web app by molloy on Tuesday April 10, 2018 @06:49PM (#16806331)
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.
Re:Learn React by building a web app by hesarenu on Wednesday April 11, 2018 @01:51AM (#16808385)
Mobx. I went from redux fanboy to using mobx exclusively.