Skip to content

Instantly share code, notes, and snippets.

@marcusradell
Last active December 7, 2017 12:05
Show Gist options
  • Save marcusradell/cec4ba2d6b3d6c7ea4721362a6e8da38 to your computer and use it in GitHub Desktop.
Save marcusradell/cec4ba2d6b3d6c7ea4721362a6e8da38 to your computer and use it in GitHub Desktop.
Proposal talk React state management

React state management first principles

Description

There are many different ways to code in React. Choosing how you handle state can be overwhelming, and transitioning to something like Redux can mean tearing up your entire code base.

Let's see how we can write a statfeul React component at the start of a project, and how the needs change throughout the lifecycle of a project.

Abstract

We will go go from a plain connected React input field, and look at how we can write something more pure. There will be a set of five transformations of the same code. Each transformation uses boilerplate code, moving from an explorative phase into an exploitable phase.

The initial version: A plain React stateful component. We start from here and move towards something more pure step-by-step.

Second version: We break out some code outside the component, while still being in a single file.

Third version: We create separate files for the model, and extract a small util. This is the last React-centric version before the big React.Component purge.

Fourth version: Final form. High quality, and easy to write. We have now extracted away the statefulness. But how do we combine state like Redux? Well, we can use Redux too! Or...

Plus ultra: A magic stream has been observed Plus ultra! We use the Framework planck-state. We can now combine states as well as call actions from the outside with the help of Observable stream.

You can see the source code at https://github.com/marcusnielsen/talks-react-first-principles.

Who is this presentation for?

Frontend developers, React developers.

Audience level

Intermediate

Main takeaway for the audience

Refactor when the project goes from exploration to exploitation. Handle complexity, so juniors can write stateful components too. Apply what you have learned from React and Redux outside of those libraries on the rest of your code. You can connect the same business logic to plain React, Redux (Proof of Concept: https://gist.github.com/marcusnielsen/0bdc7e099cc28027d0ebcf066ad74fed), Observable streams libraries, or something else.

Prerequisite knowledge

JavaScript React Object.assign / Object spread Immutability Higher order functions Lambda functions

Video URL (not the same talk)

https://www.youtube.com/watch?v=32qY8OjhDWI&t=1303s

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment