How to use custom hook to expose state, actions and state getters.

const useModel = () => {
  const [state, dispatch] = useReducer(reducer, initState, initFunc);

  return {
    state,
    actions: useMemo(() => mapDispatchToActions(dispatch), [dispatch]),
    getters: useMemo(() => mapStateToGetters(state), [state]),
  };
};

const App = () => {
  const model1 = useModel(); // instance one with state, actions and getters.)
  const model2 = useModel(); // instance two 
  
  const renderModel = (model, modelName) => {
    const { state, actions, getters } = modelName;
    return (
      <div>
        <div onClick={() => actions.inc()}>
          <u>Click to inc counter in model {num}</u>
        </div>
        <hr />
        <div>{JSON.stringify(state)}</div>
        <hr />
        <div>isCounterEven: {getters.isCounterEven()}</div>
        <hr />
        <div onClick={() => actions.incLazy()}>
          inc lazy {JSON.stringify(state)}
        </div>
        <hr />
        <div>isLazyEven: {getters.isLazyEven()}</div>
        <hr />
        <div>isCounterSmall: {getters.isCounterSmall}</div>
      </div>
    );
  };
  
  ...
}