redux.js:426 Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

RTK configureStore 사용중에 다음과 같은 에러가 발생하였다.

 

`Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.` 

 

[내가 작성한 코드]

• reducer.tsx

import { configureStore } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import userSlice from "./user";
import productSlice from "./products";

export const store = configureStore({
  reducer: {
    user: userSlice,
    products: persistReducer(persistConfig, productSlice),,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

 

[공식 문서]

import type { Reducer } from '@reduxjs/toolkit'
import { configureStore } from '@reduxjs/toolkit'
import todosReducer from './todos/todosReducer'
import visibilityReducer from './visibility/visibilityReducer'

const reducer = {
  todos: todosReducer,
  visibility: visibilityReducer,
}

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
})

 

[변경후]

공식문서처럼 rootReducder로 묶어주었으나, 오류가 해결되지 않았다.

알고보니 store.tsx와 redcuer.tsx에 이중선언되어서 오류가 발생한 거였다.

 

그래서 reducer.tsx에는 리듀서들을 모아서 선언해주는 역할로 두고

import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import userSlice from "./user";
import productSlice from "./products";

export const persistConfig = {
  key: "root",
  storage,
};

export const rootReducer = {
  user: userSlice,
  products: persistReducer(persistConfig, productSlice),
};

configStore를 사용해서 store를 선언해주는 부분에 rootRedcuer를 reducer.tsx에서 import 하도록 변경하였다.

import { rootReducer } from "./../recuders";
import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
import {
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;