Redux(-like) State Management In And Around WordPress

This post is a companion to my talk for the JavaScript for WordPress conference. The talk is supposed to be titled “State Management with Redux in WP” but I always end up changing the title last minute.

In this case, Zac and I honestly didn’t know enough about Gutenberg when we came up with the topic to know exactly what it would be about. We had some theories when we discussed it in this video a few months ago:

Watch The Talk

Click here to watch!

Screen cap from the talk!

Slides

Here are the slides for my talk:

Helpful Links

Example Code

Because this talk will be streaming, some people may have issues viewing the code. Also, I used Carbon.sh to generate screenshots of example code to ensure they looked good. That means you can’t cut and paste from the examples, or read them with a screen reader, which is sub-optimal.

So, here is an image gallery of the code samples with links to the actual code it is based on. Now you can see the practical, real world application of these concepts.

This example code is based on the Caldera Forms Processor UI library, which is what I’m currently working on andand Caldera Forms’ Gutenberg block.

A Dumb App Component

Presentational Component

See full source code

Component PropTypes

A Dumb Component Nested In App

See full source code

Tests For A Dumb Component

See full source code

Higher Order Components

Example From Gutenberg: With API Data

The Provider Higher Order Component

See full source code

Container Component – withSelect

See full source code

Container Component – withDispatch

See full source code (same as above)

Container Component Wrapped With State

See full source code (same as above)

Actions

Action Function

See full source code

Testing Action Functions

See full source code

Selectors

Selector Functions

See full source code

Testing Selector Functions

See full source code

Reducers

Reducer Functions

See full source code

Testing Reducer Functions

See full source code

Resolvers

Resolver Functions

See full source code

Testing Resolver Functions

See full source code

Registering A Store

Pattern

See full source code

Complete Example

See full source coe

Using @wordpress/data Store In A Gutenberg Block

See full source code

Using @wordpress/data Store In A React App

See full source code (same as above)

Leave a Reply

Your email address will not be published. Required fields are marked *