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
Slides
Here are the slides for my talk:
Helpful Links
- Uncle Bon on the Single Responsibility Principle
- Tom on the Single Responsibility Principle
- Dan Abromov on Presentational vs Container Components for React + Redux
- The WordPress Data Module
- Efficient client data management for WordPress Plugins by Riad Benguella
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
A Dumb Component Nested In App
Tests For A Dumb Component
Higher Order Components
Example From Gutenberg: With API Data
The Provider Higher Order Component
Container Component – withSelect
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
Testing Action Functions
Selectors
Selector Functions
Testing Selector Functions
Reducers
Reducer Functions
Testing Reducer Functions
Resolvers
Resolver Functions
Testing Resolver Functions
Registering A Store
Pattern
Complete Example
Using @wordpress/data Store In A Gutenberg Block
Using @wordpress/data Store In A React App