Cannot use dispatch or action-typed hooks on complex store model, but useStoreState still works?

Hello, I’ve recently made a huge jump from v2.6.6 to the latest (v5.0.3) of easy-peasy and now my previously working dispatch hook no longer works. The error I’m receiving is:

const dispatch = useStoreDispatch();
// note this isn't a typescript compilation error. The property of the dispatch object isn't defined
TypeError: Cannot read property 'config' of undefined
> 61 | const dispatchConfig = dispatch.resource.config;

To give some background information, the following is how I’ve built the store model and hooks to consume via my React component. To create the model for the store, I’m doing so using a series of class instantiations. From what I’ve read in the docs, it is perfectly acceptable as easy-peasy will walk through the model to get actions/thunks :

(store.ts)

export interface StoreModel {
    app: AppStore;
    resource: ResourceStore;
}

const {
    useStoreActions,
    useStoreState,
    useStoreDispatch
} = createTypedHooks<StoreModel>();

export { useStoreActions, useStoreDispatch, useStoreState };

// I have quite a few more model classes that are getting instantiated here, but cut for brevity.
export const store = createStore({
    app: new AppStore(),
    resource: new ResourceStore()
)}

To get an idea of what the model looks like, the ResourceStore class is defined as follows:

(resource.store.ts)

export class ResourceStore {
    public list = new ListResource();
    public config = new ConfigResource();
}

And the nested ConfigResource instantiation on the ResourceStore object looks like this:

(config.resource.ts)

export class ConfigResource extends Resource<any> {
    public getAppInfo = thunk<ConfigResource, any, StoreModel>(
        async (actions) => {
           return fetch(`${process.env.PUBLIC_URL}/someFile.json`)
              .then((res) => res.json())
              .then((appInfo) => {
                  actions.setAppInfo(appInfo);
                  return appInfo;
              });
        }
     );

   // there are some other thunks and actions here...
}

The store has been exposed via the StoreProvider higher up in the component tree (App.tsx), but this is the first component where the store state is to be retrieved and actions/thunks are to be dispatched:

(MyApp.component.tsx)

export const MyApp = () => {
  const history = useHistory();
  const [routes, setRoutes] = useState<JSX.Element>();

  // note the useStoreState hook is working as expected
  const [loading, someState ] = useStoreState((state) => [
    state.app.loading,
    state.resource.config.someState
  ]);

  const dispatch = useStoreDispatch();
  // This is where the error occurs: 
  const dispatchConfig = dispatch.resource.config;

The useStoreState hook is working as expected, but the resource property does not exist on dispatch. I believe the typedHooks are working correctly because while hovering over each, they resolve as follows:

const dispatch: Dispatch<StoreModel, AnyAction>
    (property) resource: RecursiveActions<ResourceStore>
        (property) config: RecursiveActions<ConfigResource>

I’ve read through the docs and have tried accessing my store via actions as follows, but get the same error (TypeError: Cannot read property ‘config’ of undefined)

  const configAction = useStoreActions((actions) => {
    // Also, the debug result is an empty object {}, but the types also appear to resolve while hovering over each property
    console.log(debug(actions));
  });

One last thing: II’ve also made sure that my state is resolving properly via the useStoreState hook. If I call any particular piece of the model, they are retrieved:

// this works
const [
    modal,
    notification,
    loading,
    group,
    user,
    configResource,
  ] = useStoreState((state) => [
    state.modal,
    state.notification.target,
    state.app.loading,
    state.resource.user.group,
    state.resource.user.target,
    state.resource.config
  ]);

I can see the config resource getAppInfo thunk in state. I just can’t seem to call dispatch on it. Any help would be much appreciated. Thanks.

[futureproofd]

Hi, thanks for getting back to me. I understand you must be very busy. I’ve officially moved on from the position I was in to solve this issue, but my old colleague has most likely taken the reins on this upgrade task. I will reach out to her to see if she’s available to provide more information 👍

[payal-bhs]

Hello, any update for this issue ?