Redux Toolkit Query - Middleware path

Question

we are working with redux and have several apps on a website. Our store looks like this

The store is thus divided according to the individual apps. But this becomes problematic when I want to work with a middleware in an app.

Because the key of the app is injected into the store, the store tells me that the middleware is not registered.

  if (store.asyncReducers[key]) {
    return false;
  }
  store.asyncReducers[key] = reducer;
  store.replaceReducer(createReducer(store.asyncReducers));
  return store;
};

The middleware thinks it can access it on: store.planningData but the correct path would be store.planningApp.planningData.

// Define a service using a base URL and expected endpoints
export const schedulerData = createApi({
  reducerPath: 'schedulerData',
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.REACT_APP_API_ENDPOINT + '/api/production/planning/',
  }),
  endpoints: (builder) => ({
    getSchedulerEvents: builder.query({
      query: () => `get-scheduler`,
      transformResponse: (response) => {
        return {
          resources: response.resources,
        };
      },
    }),
  }),
});

If i stop injecting the key of the app to the reducer, everything works fine.

Do you have any suggestions how I could solve this?

Answer 1

RTK Query is specifically written with the assumption that the "API slice" reducer is attached to the root state. It does not currently support having that reducer attached in a nested object.

There's an open issue asking for this sort of capability, but we currently have no plans to work on that any time soon:

https://github.com/reduxjs/redux-toolkit/issues/2766