3 ms·
Personally, I kept the concept of unidirectional flow of data, but instead use a Web Worker as storage of state, which emits immutable props to render. Compone
by wildpeaks 9y ago
Personally, I kept the concept of unidirectional flow of data, but instead use a Web Worker as storage of state, which emits immutable props to render.
Components can post messages to the worker to request an action on the state that will most likely change its data, but they can't edit the data directly, and props are only emitted if there is really a change in data.
Inside the worker, state is stored as immutable data, and action handlers are only allowed to make one non-async change (because the return value is the modified state). If it needs to do multiple things (e.g. download then process the result), it must schedule another action when it's ready to do the sync operation. This splits into granular easy-to-test operations on the state.
That way, it limits React (or Preact) to rendering (so it can also be used with other libraries, e.g. WebGL), and you can record the messages going through the worker to replay and analyze a scenario.
So far I'm happy with this setup, but I can understand the allure of thirdparty libraries instead.