t83714 / fractal-component Goto Github PK

Sometimes, we need to share a portion of the state data among components.
fractal-component doesn't stop you from accessing the state data globally in order to achieve this but we probably need a better way of doing that without breaking the promise of not depending on global state store.

Proposed solution:

• Allow Users to defined a special component that encapsulates the shared state
  • No UI
  • No saga
  • Only defines:
    • Initial State
    • Namespaced Actions
    • Reducers
  • Can published as NPM module & reuse among different projects
  • User can define a shared state as the followings:

SharedABCData.js:

import { createSharedState } from "fractal-component";
import * as actions from "./SharedABCDataActionCreators";
import * as actionTypes from "./SharedABCDataActionTypes";
const SharedABCData = createSharedState({
  namespace: "io.github.t83714/SharedABCData",
  initState: {
    x: 101
  },
  actionTypes,
  reducer: (state, action) => {
    ...
  }
});
export default SharedABCData;
export { actions, actionTypes };

• Other Components can use/reference this SharedABCData by:

import { useComponentManager } from "fractal-component";
import SharedABCData from "./SharedABCData";
function ComponentA(props){
  const [state, dispatch] = useComponentManager({
    namespace: "io.github.t83714/ComponentA",
    initState: {
      a: {
        b: 1
      }
    },
    ....
    sharedComponents: {
      "a.c": SharedABCData
    }
  });
  
  return <div>xxxx</div>;
}

Then, the actual component state of ComponentA will be:

{
  "a": {
    "b": 1,
    "c": {
      "x": 101
    }
  }
}

Anytime when SharedABCData changed, ComponentA's state will also be updated accordingly and rendered.

Although from ComponentA's point of view, the SharedABCData portion of data appears to be part of its state data, there is only one copy of SharedABCData in global state store and SharedABCData it not part of ComponentA's state data in global state data store.

The global data store will look like (assume namespace prefix is empty):

{
    "io.github.t83714": {
        "SharedABCData": {
            "c0": {
                "x": 101
            }
        },
        "ComponentA": {
            "c0": {
                "a":{
                    "b":1
                }
            }
        }
    }
}