Mark's Dev Blog

Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson
 Sponsor @markerikson

Mark's Dev Links - Issue #5

Posted on
#newsletter

This is a post in the Newsletter series.

Weekly newsletter, sent week of 2018-02-19

Hi, and welcome to issue #5 of Mark's Dev Links! This is a weekly-ish email newsletter, focused on the React and Redux ecosystem, and stuff that's caught my attention.

A couple smaller React 16-related updates this week. Brian Vaughn wrote a good comment on Github describing how React 16 breaks up work into the "render" and "commit" phases, and which lifecycle methods are part of the "render" phase and should therefore not have side effects. He included an example of how to structure component-level fetching logic using the new getDerivedStateFromProps API.

Over on Twitter, Andrew Clark chimed in on a thread that was arguing about functional components vs class components, and pointed out that in React 16, functional components do indeed have less performance overhead than class components since since they're no longer wrapped in classes, and do not need things like constructors or lifecycles. This relates back to the original announcement of functional components in React 0.14, which promised that "In the future, we'll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations."

Alternative React Component APIs 🔗︎

I saw two different alternative APIs for React components come out this week. Jason Nall released react-routine, which uses a generator-based controller approach inspired by redux-saga. Meanwhile, Ryan Florence published react-component-component, which is a generic React component that lets you pass in lifecycle methods as props, like <Component didMount={ ({setState}) => { } } />.

That reminded me that I've seen a few other customized React component APIs out there, so I've included links to those. In particular, Michael Jackson and James Long have both been playing around with their own alternative APIs that are more functional-inspired and avoid use of this. Dominic Gannaway has made a few comments on Twitter around the eventual possibility of a functional component API that has state or lifecycles as well.

"Redux is overused" Twitter discussion 🔗︎

Last week, Twitter broke out into a bunch of ricocheting retweets and arguments over whether Redux is overused. As best as I can reconstruct things, here's what happened:

  • James Kyle made some comments about having decided Redux was a bad idea after all. That drew discussion, including from Dan Abramov.
  • Cory House posted a tweet saying that his team was badly overusing Redux. That got heavily retweeted.
  • Jani Evakallio cracked a joke about thought leaders telling everyone to rewrite from Redux, which got seemed to get retweeted by people who didn't realize it was a joke
  • I saw a bunch of the original tweets and replies with people chiming in about Redux being overused or people moving away from Redux, and got kind of frustrated, since I've addressed this in the Redux FAQ and several of my blog posts
  • Kyle Shevlin and Jack Franklin had some good comments on how a lot of the issue is education, in that people don't properly understand what the purpose of Redux is and how to use it appropriately

So, it was a big kerfluffle, and nothing really changed, but I guess it was interesting to see some of the different trains of thought going on out there.

Redux: Let's Code a Higher-Order "Duck" 🔗︎

The "ducks" pattern is a semi-popular approach for organizing Redux logic by putting action types, action creators, and reducers into a single file. This post shows how to combine the "ducks" pattern with the approaches shown in the Redux docs "Reducing Boilerplate" page to create multiple instances of a duck that contains reusable list CRUD handling logic.

Redux Ecosystem 🔗︎

Kea 🔗︎

I've seen many higher-level abstractions built on top of Redux. One of the most interesting ones is Kea, which combines Redux, Reselect, and Redux-Saga under the hood to let you write "logic stores" that can be connected to React components.

Kea ensures that action creators are bound up to dispatch, action creator functions can double as action types using some toString() magic, support sagas and selectors is built in, and the "ducks"-style structure puts related logic in one place.

It's a nice-looking option for people who are using these tools together and want to simplify some of the code, or want to "reduce Redux boilerplate" in general.

reselect-tools: debugging tools for Reselect 🔗︎

This is a nifty little set of tools for debugging your Reselect selectors. By replacing the standard Reselect createSelector version with the one from reselect-tools, you can visualize the flow of data between selectors. It even has a Chrome DevTools extension too!

Redux Issues Spotlight 🔗︎

New Redux Docs Build Setup! 🔗︎

The Redux docs have always been built using Gitbook. Gitbook has apparently been working on a new version of both the build tool and their docs editing/integration site, with a new default docs page design as well. A Gitbook dev filed a PR to update Redux's docs to use the new beta version of Gitbook, and we merged it in. This unfortunately broke some things, such as existing external URLs not working because the generated page links no longer end with .html. It looks like we've got the biggest issues sorted out, and hope to get the last rough edges fixed soon.

In related news, I'm working on finally getting a similar build setup for the React-Redux docs in place, and I'm hoping that we can start planning a revamp of those started soon.

Me, Myself, and I 🔗︎

I just got back from an extended business trip, so I'm mostly trying to relax a bit and settle back into a normal routine.

I've spent most of my time at work lately doing work on build infrastructure, tooling, and integration, but I finally had time this last week to sit down and work on a new feature. The app uses a 3D globe library called Cesium, with data display driven by React components. We had some existing functionality that showed a single image overlaid on the globe at a time. I was able to generalize that to maintain a history of image overlays loaded, show multiple overlays on the globe at once, and allow toggling them individually. It really was "just" a matter of a reducer that tracked items in an array, very similar to the approach I showed in Practical Redux, Part 10: Managing Modals and Context Menus. I was able to knock that out in a couple days, and it was very satisfying to see it work exactly as I'd anticipated :)

Other than that, most of my attention for the next couple months will be focused on preparing for the first Redux workshop I'll be teaching in April, as well as the other couple talks I'll be giving in March.

Obligatory Plug 🔗︎

My "Practical Redux" tutorial series is now an interactive course on Educative.io!. Check it out!

Also, if you're in the New York city area, I'll be doing a "Redux Fundamentals" workshop on April 19-20, with other workshop locations and dates TBD later this year.

This is a post in the Newsletter series. Other posts in this series: