Using Redux in Modern React Apps with Mark Erikson

Joel and Mark Erikson chat about the motivation behind Redux. The historical context and the future of Redux. How Redux Toolkit solves community pain points. Additionally, Mark Erikson gives a walkthrough of how Redux Toolkit works and how to use createSlice, createAsyncThunk, and createEntityAdapter.

Key Terms

Redux - Redux is an open-source JavaScript library for managing application state.

Immer - a library created based on the “copy-on-write” mechanism — a technique used to implement a copy operation in on modifiable resources.

Flux - is an architecture for creating data layers in JavaScript applications. It was designed at Facebook along with the React library.

Redux Toolkit - an add-on package to Redux, which includes opinionated defaults.

Resources

• https://twitter.com/acemarke
• Redux Toolkit
• Mark's Dev Blog
• Redux - A predictable state container for JavaScript apps

What keeps you excited about Redux?

• The motivation: people are still using Redux and will continue to use Redux for a long time.

How do people criticize Redux?

• This blog post was a result of responding to the endless waves of “Redux is dead...”

• People don’t understand the context and history behind why a particular tool exists—for example, jQuery, Angular, Backbone, etc.

• All these tools were created at a specific time, in a particular place, by people trying to solve particular problems.

  • And they were written using the knowledge that existed at that particular time.
  • Understanding the context will help you know where it belongs in the larger picture.

• Example of this: "Things You Should Never Do, Part I" by Joel Spolsky.

  “When you throw away code and start from scratch, you are throwing away all that knowledge. All those collected bug fixes. Years of programming work.”

Redux in 2020

• In the context of Redux, it came out in 2015. And currently, people ask:
  • Why do I have to dispatch things?
  • Why is it called actions?
  • Why do I need to have separation between data and UI?
• Here, it’s essential to understand that Flux inspired Redux.
  • Like Flux, Redux prescribes that you concentrate your model update logic in a particular layer of your application. Instead of letting the application code directly mutate the data, both tell you to describe every mutation as a plain object called an “action.”
  • The idea was to have access to a single function and not worry about synchronization.
• People learning Redux today don’t see the historical context of those patterns.
• Another criticism of Redux: verbosity.
  • The reality is that Redux lets us choose how verbose we’d like your code to be, depending on personal style, team preferences, longer-term maintainability, and so on.
• The three fundamental principles of Redux has been over-interpreted:
  • Single source of truth: The state of your whole application is stored in an object tree inside a single store.
  • State is read-only: The only way to mutate the state is to emit an action, an object describing what happened.
  • Mutations are written as pure functions: To specify how the state tree is transformed by actions, you write pure reducers.

Redux Toolkit

• People have assumed that they need to put everything into Redux. But that’s overkilled. It’s quickly going to become unmaintainable.
• Link to doc: When should I use Redux?
• The approach to dealing with Boilerplate in Redux was to use Immer.
  • Michel Weststrate builds Immer - simplifies writing immutable update logic:

Docs: “The basic idea is that you will apply all your changes to a temporary draftState, which is a proxy of the currentState. Once all your mutations are completed, Immer will produce the nextState based on the mutations to the draft state.”

Michel Weststrate creator of Mobx and Immer Libraries for JavaScript

• Putting everything together changed how Redux Toolkit was created. It addressed three common concerns about Redux:
  1. “Configuring a Redux store is too complicated.”
  2. “I have to add a lot of packages to get Redux to do anything useful.”
  3. “Redux requires too much boilerplate code.”
• Redux Toolkit was built to be beneficial to all Redux users, not just someone new to Redux.
  • It’s very opinionated.

What are the big ideas of State Management?

• First, ask yourself, what type of app am I building?
  • Where is the data coming in from?
  • How am I interacting with that data?
  • How long does the data need to live?
  • Does the data need to change over time?
• Those questions will dictate what tools to use.
• An example of this: Building a MEAN.js AngularJS Project with Create-React-App.

What does the future look like for Redux?

• "Redux is here to stay..."
• Many downloads are coming from Wordpress’s Gutenberg (block editor) and other larger projects such as Gatsby.

During Gatsby’s bootstrap & build phases, the state is stored and manipulated using the Redux library. The fundamental purpose of using Redux in Gatsby’s internals is to centralize all of the state logic.

• Lots of tools overlap with Redux. It has passed the peak of popularity, and usage will shrink over time. But at the same time, people are going to keep using Redux. Technologies don’t just disappear.
• Questions to be answered:
  • How will Redux fit with Concurrent Mode and other features from the React team?
  • Redux will probably make use of useMutableSource for compatibility purposes.

useMutableSource - enables React components to safely and efficiently read from an unreliable external source in Concurrent Mode. The API will detect mutations that occur during render to avoid tearing, and it will automatically schedule updates when the source is mutated.

Redux Toolkit

The recommended way to start new apps with React and Redux Toolkit is by using the official Redux+JS template for Create React App.

• The first problem that it’s trying to solve: it takes too many steps to set up a store.

• The solution is to create Reducers that specify how the application’s state changes in response to actions sent to the store.

• Actions only describe what happened but don’t explain how the application’s state changes.

  • With Flux, they had individual stores. In Redux, you have a single Object decided up.
  • It’s generally agreed that functions should be relatively short and ideally only do one specific thing.

• One key/value section of that object is a “slice,” We use the term “slice reducer” to describe the reducer function responsible for updating that slice of the state.

Structure files as "Ducks":

• Redux itself does not care about how your application’s folders and files are structured. However, co-locating logic for a given feature in one place makes it easier to maintain that code.
• Redux Toolkit addressed a pain point from the community: having several files for one feature.

Working with createSlice

As createSlice creates your actions and your reducer for you, you don’t have to worry about type safety here. Action types can just be provided inline.

Working with createAsyncThunk

• This API focuses on creating a standard recommended approach for handling async request lifecycles. Link to documentation of createAsyncThunk:
• If you need to cancel a thunk before the payload creator is called, you may provide a condition callback as an option after the payload creator.

Working with createEntityAdapter

• It provides a set of functions that handles the “entity state” structure.
• This API was ported from the @ngrx/entity library created by the NgRx maintainers and significantly modified for Redux Toolkit.
• You can decide what actions to pass. And the CRUD methods may be used in multiple ways.

Pull Request #3740

• The Redux documentation needs to be re-written. The current documentation was written in 2015; it’s no longer relevant for new developers.
• The Master List.
• Goals:
  • Just Enough of Redux.
  • Learn the basics of Redux and the fastest way to get going, + “the right way.”
  • Show enough real-world patterns that you can build an app.

Instructional Design

• Egghead has focused on taking subject matter experts and systematically designing, developing, and delivering instructional products.
• The outputs can be a video course, documentation, etc.; what’s important is the output.
• There is no downside to having an instructional design session on the Redux documentation.

Roam Research

• Roam as a tool for networked thought.
• Powered by bi-directional links.

Redux Toolkit 1.0

"Redux is not designed to be the most performant or the most concise way of writing mutations. Its focus is on making the code predictable."

• Tradeoffs of React Hooks:

  https://www.youtube.com/watch?v=xiKMbmDv-Vw&feature=youtu.be

  Recap: It's about tradeoffs.

  Neither approach is "right" or "wrong" - it's about what tradeoffs you want to make: - How much do you want to "separate concerns"? - Do you prefer "shallow" testing of components, or fully "mounting/integrating" them? - How important are shallow component trees and static typing?

  Source to Slides.