awesome state management for react* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state...
TRANSCRIPT
![Page 1: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/1.jpg)
AWESOME
STATE MANAGEMENT
FOR REACT**AND OTHER VIRTUAL-DOM LIBRARIES
Fred Daoud - @foxdonut00
![Page 2: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/2.jpg)
WHY AWESOME?NOT A LIBRARY. A SIMPLE PATTERN.
![Page 3: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/3.jpg)
WORKS WITH ANY
VIRTUAL DOM LIBRARY
![Page 4: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/4.jpg)
VIRTUAL DOM IS NICEVIEW = FUNCTION(MODEL)
![Page 5: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/5.jpg)
“ HOW DO I
MANAGE STATE? ”
![Page 6: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/6.jpg)
REDUX
MOBX
CEREBRAL
CYCLE.JS
![Page 7: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/7.jpg)
LET'S LOOK AT
A DIFFERENT APPROACH.
![Page 9: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/9.jpg)
THE MEIOSIS PATTERNmodel ← single source of truthview = function(model)update model→ view is automatically re-rendered
![Page 10: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/10.jpg)
model = single source of truth
view = function(model)
const initialModel = { counter: 0 };
const view = model => ( <div>Counter is {model.counter}</div> );
![Page 11: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/11.jpg)
actions update the modelconst createActions = update => ({ increment: () => update(model => { model.counter++; return model; }) // after calling update(...), // view is automatically re-rendered });
![Page 12: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/12.jpg)
views call actionsconst createView = actions => model => ( <div> <div>Counter is {model.counter}</div> <button onClick={actions.increment}>Increment</button> </div> );
![Page 13: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/13.jpg)
WHAT IS UPDATE?
HOW DO WE AUTOMATICALLY
RE-RENDER THE VIEW?
![Page 14: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/14.jpg)
MEIOSIS PATTERN IMPLEMENTATION
Minimal streams: just map and scanOr, write your own minimal implementation
![Page 15: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/15.jpg)
FLYD STREAMS
MAPconst s1 = flyd.stream(); const s2 = s1.map(value => value * 10); s2.map(value => console.log(value));
s1(5); s1(10);
// console output is 50 100
![Page 16: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/16.jpg)
FLYD STREAMS
SCANconst s1 = flyd.stream(); const add = (x, y) => x + y; const s2 = flyd.scan(add, 0, s1); s2.map(value => console.log(value));
s1(5); s1(13); s1(24);
// console output is 0 5 18 42
![Page 17: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/17.jpg)
THE MEIOSIS PATTERNconst initialModel = { counter: 0 }; const update = flyd.stream(); const applyUpdate = (model, modelUpdate) => modelUpdate(model); const models = flyd.scan(applyUpdate, initialModel, update);
const view = createView(createActions(update)); const element = document.getElementById("app"); models.map(model => ReactDOM.render(view(model), element));
![Page 18: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/18.jpg)
USING DIFFERENT VIRTUAL DOM LIBSmodels.map(model => ReactDOM.render(view(model), element)); models.map(model => Inferno.render(view(model), element)); models.map(model => m.render(element, view(model))); models.map(model => preact.render(view(model), element, element.lastElementChild));
const render = view => element = patch(element, view); models.map(model => render(view(model)));
![Page 19: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/19.jpg)
MODEL UPDATE
PLAINupdate(model => { model.counter++; return model; });
![Page 20: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/20.jpg)
LODASH
LODASH FP
RAMDA
IMMUTABLE.JS
update(model => _.update(model, "counter", _.partial(_.add,1)));
update(_.update("counter", _.add(1)));
update(R.over(R.lensProp("counter"), R.add(1)));
update(model => model.update("counter", v => v + 1));
![Page 21: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/21.jpg)
COMPONENTS
![Page 22: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/22.jpg)
A COMPONENT IS JUST
AN OBJECT WITH FUNCTIONSimport { createActions } from "./actions"; import { createView } from "./view";
// This is the same 'update' stream ↓↓ export const createTemperature = update => ({ model: () => ({ date: "", value: 20, units: "C" }),
view: createView(createActions(update)) });
![Page 23: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/23.jpg)
TEMPERATURE EXAMPLE
![Page 24: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/24.jpg)
ACTIONS (1/2)export const createActions = update => ({ editDate: evt => update(model => { model.date = evt.target.value; return model; }),
increase: amount => () => update(model => { model.value = model.value + amount; return model; }),
![Page 25: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/25.jpg)
ACTIONS (2/2) changeUnits: () => update(model => { if (model.units === "C") { model.units = "F"; model.value = Math.round( model.value * 9 / 5 + 32 ); } else { model.units = "C"; model.value = Math.round( (model.value - 32) / 9 * 5 ); } return model; }) });
![Page 26: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/26.jpg)
VIEWexport const createView = actions => model => ( <div> <div>Date: <input type="text" size="10" value={model.date} onChange={actions.editDate}/></div> <span>Temperature: {model.value}°{model.units} </span> <div> <button onClick={actions.increase(1)}>Increase</button> <button onClick={actions.increase(-1)}>Decrease</button> </div> <div> <button onClick={actions.changeUnits}>Units</button> </div> </div> );
![Page 27: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/27.jpg)
THE MEIOSIS PATTERNconst update = flyd.stream(); const temperature = createTemperature(update); // <-------- const initialModel = temperature.model(); // <-------- const applyUpdate = (model, modelUpdate) => modelUpdate(model); const models = flyd.scan(applyUpdate, initialModel, update);
const element = document.getElementById("app"); models.map(model => ReactDOM.render(temperature.view(model), // <-------- element));
![Page 28: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/28.jpg)
MEIOSIS TRACERTIME-TRAVEL DEV TOOL
![Page 29: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/29.jpg)
MEIOSIS TRACER IN CHROME DEVTOOLS
![Page 30: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/30.jpg)
MEIOSIS TRACER IN PAGE
![Page 31: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/31.jpg)
USING MEIOSIS TRACER IN CHROMEInstall meiosis as a dev dependencyInstall the Chrome extension
// Only for using Meiosis Tracer in development. import { trace } from "meiosis"; trace({ update, dataStreams: [ models ] });
![Page 32: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/32.jpg)
USING MEIOSIS TRACER IN PAGEAlso install meiosis-tracer as a dev dep.
<div id="tracer"></div>
// Only for using Meiosis Tracer in development. import { trace } from "meiosis"; import meiosisTracer from "meiosis-tracer"; trace({ update, dataStreams: [ models ] }); meiosisTracer({ selector: "#tracer" });
![Page 33: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/33.jpg)
REUSABLE COMPONENTS
![Page 34: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/34.jpg)
REUSING THE TEMPERATURE COMPONENTexport const createApp = update => { const components = { air: createTemperature(nest(update, "air")), water: createTemperature(nest(update, "water")) };
return { model: () => ({ air: components.air.model(), water: components.water.model() }), view: createView(components) }; };
![Page 35: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/35.jpg)
NESTING THE UPDATE FUNCTION
export const nest = (update, path) => modelUpdate => update(model => { model[path] = modelUpdate(model[path]); return model; });
![Page 36: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/36.jpg)
THE VIEWexport const createView = components => model => ( <div> <h4>App</h4> {components.air.view(model.air)} {components.water.view(model.water)} </div> );
![Page 37: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/37.jpg)
REUSING THE TEMPERATURE COMPONENT
![Page 38: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/38.jpg)
PATH REPETITIONconst components = { air: createTemperature(nest(update, "air")), water: createTemperature(nest(update, "water")) };
model: () => ({ air: components.air.model(), water: components.air.model() })
<div> {components.air.view(model.air)} {components.water.view(model)} </div>
![Page 39: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/39.jpg)
ELIMINATING PATH REPETITIONconst components = createComponents(update, { air: createTemperature, // passes nest(update, "air") water: createTemperature // also wraps view(model["water"]) });
return { // returns { air: c.air.model(), water: c.water.model() } model: combineComponents(components, "model"), view: createView(components) };
<div> {components.air.view(model)} {components.water.view(model)} </div>
![Page 40: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/40.jpg)
COMPUTED PROPERTIES
![Page 41: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/41.jpg)
COMPUTED PROPERTIES (1/2)export const createTemperature = update => { const computed = model => { let temp = model.value;
if (model.units === "F") { temp = Math.round((temp - 32) * 5 / 9); } model.comment = (temp < 10) ? "COLD!" : (temp > 40) ? "HOT" : "";
return model; };
![Page 42: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/42.jpg)
COMPUTED PROPERTIES (2/2) const view = createView(createActions(update));
return { model: () => ({ date: "", value: 20, units: "C" }),
view: model => view(computed(model)) // view: R.compose(view, computed) }; };
![Page 43: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/43.jpg)
COMPUTED PROPERTIES
![Page 44: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/44.jpg)
ROUTING
![Page 45: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/45.jpg)
ROUTING EXAMPLE
![Page 46: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/46.jpg)
ROUTING: PAGESexport const pages = { home: { id: "Home", tab: "Home" }, coffee: { id: "Coffee", tab: "Coffee" }, beer: { id: "Beer", tab: "Beer" }, beerDetails: { id: "BeerDetails", tab: "Beer" } };
![Page 47: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/47.jpg)
ROUTING: NAVIGATIONexport const createNavigation = update => { const navigate = (page, params = {}) => update(model => Object.assign(model, ({ page, params })));
const navigateToBeer = () => { services.loadBeer().then(beerList => { update(model => Object.assign(model, { beerList })); navigate(pages.beer); }); }; return { navigateToHome, navigateToBeer, ... }; };
![Page 48: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/48.jpg)
ROUTING: APPexport const createApp = (update, navigation) => { const homeComponent = createHome(update); //more... const pageMap = { [pages.home.id]: homeComponent, //more... }; return { view: model => { const component = pageMap[model.page.id]; return ( // render tabs, model.page.tab determines active tab {component.view(model)} ); } }; };
![Page 49: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/49.jpg)
ROUTING: ROUTESexport const createRouter = navigation => { const routes = { "/": { id: pages.home.id, action: navigation.navigateToHome }, "/coffee/:id?": { id: pages.coffee.id, action: navigation.navigateToCoffee }, "/beer": { id: pages.beer.id, action: navigation.navigateToBeer }, "/beer/:id": { id: pages.beerDetails.id, action: navigation.navigateToBeerDetails } };
![Page 50: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/50.jpg)
ROUTING: RESOLVE ROUTEimport Mapper from "url-mapper";
const resolveRoute = () => { const route = document.location.hash.substring(1); const resolved = urlMapper.map(route, routes); if (resolved) { resolved.match.action(resolved.values); } };
window.onpopstate = resolveRoute;
![Page 51: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/51.jpg)
ROUTING: ROUTE SYNCconst routeMap = Object.keys(routes).reduce((result, route) => { result[routes[route].id] = route; return result; }, {});
const routeSync = model => { const segment = routeMap[model.page.id] || "/"; const route = urlMapper.stringify(segment, model.params||{}); if (document.location.hash.substring(1) !== route) { window.history.pushState({}, "", "#" + route); } };
![Page 52: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/52.jpg)
ROUTING EXAMPLE
![Page 53: AWESOME STATE MANAGEMENT FOR REACT* - jsmeiosis.js.org/meiosis-slides.pdf · awesome state management for react* *and other virtual-dom libraries fred daoud - @foxdonut00](https://reader030.vdocuments.site/reader030/viewer/2022040409/5ec8595d09c24d5c534d31f5/html5/thumbnails/53.jpg)
MEIOSIS
Documentation • Examples
Tracer • Gitter chat
Fred Daoud • @foxdonut00
HTTP://MEIOSIS.JS.ORG