CODEWITHSUNDEEP
javascriptreduxreact-reduxredux-toolkitredux-thunk
four-eyes
four-eyes

Reputation: 12394

Cannot use getDefaultMiddleware/apiSlice with redux toolkit

I am implementing RTK Query for which I need to edit my store. Currently, my store setup looks liket his

import {configureStore, combineReducers} from '@reduxjs/toolkit';
import {useDispatch, useSelector, TypedUseSelectorHook} from 'react-redux';
import {apiSlice} from './api';
import storage from 'redux-persist/lib/storage'
import {
    persistReducer,
    persistStore,
} from 'redux-persist'
import thunk from 'redux-thunk';
import {getPersistConfig} from 'redux-deep-persist';

export const rootReducer = combineReducers({
    settings: settingsReducer,
    user: userReducer
})

const config = getPersistConfig({
    key: 'root',
    storage,
    whitelist: ['user.name', 'settings.color'],
    rootReducer
})

const persistedReducer = persistReducer(config, rootReducer)

export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk]
});

export const persistor = persistStore(store)
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Now, when using RTK Query I need to alter the following lines

export const rootReducer = combineReducers({
    settings: settingsReducer,
    user: userReducer,
    [apiSlice.reducerPath]: apiSlice.reducer,
})

export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(apiSlice.middleware)
});

I have to (?) replace middleware: [thunk] with middleware: getDefaultMiddleware => getDefaultMiddleware().concat(apiSlice.middleware). However, when I do this, I get the following error

A non-serializable value was detected in an action, in the path: register. Value: function register(key). Take a look at the logic that dispatched this action:
Object { type: "persist/PERSIST", register: register(key), rehydrate: rehydrate(key, payload, err)}

(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants) (To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)

Is there any way to get [thunk] and getDefaultMiddleware => getDefaultMiddleware().concat(apiSlice.middleware) into the middleware, or is it not possible to use RTK Query with my setup?

Upvotes: 0

Views: 416

Answers (1)

phry
phry

Reputation: 44086

Your previous setup removed all the middleware that Redux Toolkit usually includes to ensure that you are not putting things into the store that don't belong into the store. Now you go to the recommended setup, so those tests run and you are getting error messages.

Your warnings here are about redux-persist that needs additional configuration because it bends these rules quite a lot.

You can find help on that here in the docs:

export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== "production",
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(apiSlice.middleware),
});

Upvotes: 2

Related Questions