Redux Toolkit configuration

Question

I am using Redux Toolkit for my react application. I was trying to configure redux store like this:

// index.js (store)
import { combineReducers, configureStore } from '@reduxjs/toolkit'
import { composeWithDevTools } from 'redux-devtools-extension'
import authReducer from './slices/auth.slice'
import userReducer from './slices/user.slice'
import navigationReducer from './slices/navigation.slice'

const rootReducer = combineReducers({
  auth: authReducer,
  users: userReducer,
  navigation: navigationReducer,
});

const composedEnhancer = composeWithDevTools({
});

const store = configureStore({
  reducer: rootReducer,
  devTools: true,
  enhancers: [composedEnhancer],
});

export default store;

This an example of one of slices: authSlice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { userInstance } from "../instances";

export const loginUser = createAsyncThunk(
  "auth/login",
  async (data, { rejectWithValue }) => {
    try {
      const response = await userInstance.post("/auth", data);
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

export const registerUser = createAsyncThunk(
  "auth/register",
  async (data, { rejectWithValue }) => {
    try {
      const response = await userInstance.post("/auth/new", data);
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

export const loadUser = createAsyncThunk(
  "auth/current",
  async (data, { rejectWithValue }) => {
    try {
      const response = await userInstance.get("/");
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);


const initialState = {
  isLoading: null,
  token: localStorage.getItem("jw-token"),
  isAuthenticated: false,
  error: null,
  user: null,
};

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    logoutUser: (state) => {
      localStorage.removeItem("jw-token");
      state.isLoading = false;
      state.error = null;
      state.isAuthenticated = false;
      state.user = null;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(loginUser.pending, (state) => {
        state.isLoading = true;
        state.error = null;
        state.isAuthenticated = false;
        state.user = null;
      })
      .addCase(loginUser.fulfilled, (state, { payload }) => {
        localStorage.setItem("jw-token", payload);
        state.isLoading = false;
        state.error = null;
        state.isAuthenticated = true;
        state.user = null;
      })
      .addCase(loginUser.rejected, (state, { payload }) => {
        localStorage.removeItem("jw-token");
        state.isLoading = false;
        state.error = payload;
        state.isAuthenticated = false;
        state.user = null;
      })
      .addCase(registerUser.pending, (state) => {
        state.isLoading = true;
        state.error = null;
        state.isAuthenticated = false;
        state.user = null;
      })
      .addCase(registerUser.fulfilled, (state, { payload }) => {
        localStorage.setItem("jw-token", payload);
        state.isLoading = false;
        state.error = null;
        state.isAuthenticated = true;
        state.user = null;
      })
      .addCase(registerUser.rejected, (state, { payload }) => {
        localStorage.removeItem("jw-token");
        state.isLoading = false;
        state.error = payload;
        state.isAuthenticated = false;
        state.user = null;
      })
      .addCase(loadUser.pending, (state) => {
        state.isLoading = true;
        state.error = null;
        state.isAuthenticated = false;
        state.user = null;
      })
      .addCase(loadUser.fulfilled, (state, { payload }) => {
        state.isLoading = false;
        state.error = null;
        state.isAuthenticated = true;
        state.user = payload;
      })
      .addCase(loadUser.rejected, (state, { payload }) => {
        localStorage.removeItem("jw-token");
        state.isLoading = false;
        state.error = payload;
        state.isAuthenticated = false;
        state.user = null;
      })
      .addDefaultCase((state) => {
        state.isLoading = null;
        state.token = localStorage.getItem("jw-token");
        state.isAuthenticated = false;
        state.error = null;
        state.user = null;
      });
  },
});

export const {
  logoutUser
} = authSlice.actions;

export default authSlice.reducer;

The problem that I am facing is when I run npm start, it throws an error: "Expected the reducer to be a function":

How to resolve this problem ? Can someone explain to me what caused this problem ? PS: This project is a cloned project from Github and the original did not use Redux Toolkit, it used Redux Thunk instead

Answer 1

This issue is resolved! For anyone facing the same issue, just remove the Redux Devtools as is integrated by default in Redux Toolkit: the store.js will be like this:

import { configureStore } from '@reduxjs/toolkit'
import authReducer from './slices/auth.slice'
import userReducer from './slices/user.slice'
import navigationReducer from './slices/navigation.slice'

const store = configureStore({
  reducer: {
    auth: authReducer,
    users: userReducer,
    navigation: navigationReducer
  },
  devTools: true,
});

export default store;