Vandux
So you want a Redux solution for components, but you have to deal with server rendered DOM that some Headed CMS spat out?
Here is an ES6 Pub/Sub pattern with a State Machine pattern combined with Reducers for said situation.
Would I recommend using this over something like React on the server and client? Nope, I would not.
What this will work well for, is those cases when you do not have a React server render, still need SEO compliance, and want predictable/testable state management.
Demo
https://benbowes.github.io/vandux/dist/?vandux-debug
Codepen example
https://codepen.io/benbowes/pen/RxrWBE
Getting started
npm install -D vandux
or yarn add vandux
Then connect your html with a Vandux store. A full example can be found in here: https://github.com/benbowes/vandux/tree/master/src/examples
Note that Vandux is not currently intended to be a global store, it is intended to be used at a component/module level. Providing your components with the ability to show you what happened when. You can have several Vandux stores, all working independently.
A Vandux code example
Some html you'd like to "connect" with a Vandux store
Name: Title:
Assuming this folder structure for componentA ...
- componentA/
- reducer.js
- render.js
- index.js
Your entry file
; document;
componentA/index.js
/*** Component setup function. Connects the html component with the store.* Initial state is passed in to the component. When the component * is connected it will render with it's initial state automatically with an `INIT` action.*/;;; // Creates a relationship between event listeners and the store { el; el;} // Connect HTML component with store { const el = document; const store = ; ;};
componentA/reducer.js
{ }
componentA/render.js
let $name;let $title; // render function - perform DOM manipulations in here. { $name = $name || el; $title = $title || el; // Add data to the DOM $titletextContent = statetitle; $nametextContent = statename;}
Debug mode
Add the query param ?vandux-debug=true
to your URL to see this kind of output in your browser console. It will show you what happened when, helping you debug race conditions.
wrappercomponentB INIT name: "" title: ""wrappercomponentB UPDATE_NAME name: "a" title: ""}wrappercomponentB UPDATE_NAME name: "aa" title: ""wrappercomponentB UPDATE_NAME name: "aaa" title: ""
Note the first items are the values of the attributes on the html component - so you can identify which component published the event.