Globally shared state by ReducerModuleFunc, and re-renderer the components if the corresponding ClassState is updated.

[chhsiao1981]

Currently each new ClassState is created when using useReducer.

Furthermore, all the ClassStates are created in the parent-components.
If we want to get the ClassState in the child-components, then
we need to pass it with props.

It is better to have a shared state by ReducerModuleFunc,
and re-render the components if the corresponding ClassState is updated.

Therefore, given ReducerModuleFuncA, ClassStateA, ParentComponent, ChildComponent, and GrandChildComponent:

1. If we useReducer(ReducerModuleFunc) in ParentComponent, ChildComponent, and GrandChildComponent,
   for the same id, they should be able to access the same state.
2. If some dispatch is triggered in GrandChildComponent, then ParentComponent, ChildComponent, and GrandChildComponent should all be re-rendered.
3. For simplicity, ideally only the id is passed through the components. However, this may violate the reactjs principle.

[chhsiao1981]

Failed last time:

if we pass id-only in the props, only ParentComponent is rendered, but not the ChildComponent or GrandChildComponent.

[chhsiao1981]

One possible approach is to utilize useContext.

Need to investigate more details about useContext
to have an elegant method to:

1. some magic for the developers to globally specify "context-provider" only at most once, but still only the components with the corresponding changed thunk are re-rendered. (ex: a virtual context-provider that recursively render all the context-provider)
2. some magic for the developers to easily "virtually" create/register the context. (ex: register to some global map in use-thunk.)