Store does not have a valid reducer in React JS

I created a Store using the Redux toolkit. I set up each and everything to look similar to what the official docs tell, but I am still facing the following error

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

here is my Index.jsx file where is setup Provided the store state

    import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { store } from './store/store'
import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>,
  </React.StrictMode>,
)

store.js File

import { configureStore } from '@reduxjs/toolkit';
import userDataReducer  from '../utils/UserDataSlice'

export const store = configureStore({
    reducer: {
        userData : userDataReducer
    }
});


userDataSlice File in utils

import { createSlice } from '@reduxjs/toolkit';



const userDataSlice = createSlice({
  name: 'userData',
  initialState: {
    user_data: []
  },
  reducers: {
    setUserData: (state, action) => {
      state.user_data = action.payload;
    },
    getUserData: (state) => {
      return state.user_data;
    }
  }
});

export const { setUserData, getUserData } = userDataSlice.actions;

export default userDataSlice.reducer;

I’m unable to identify what the issue is it look fine but I am getting the error I mentioned above

>Solution :

It looks like there might be a problem with how you are exporting the userDataReducer from the userDataSlice file.

In your store.js file, you are importing userDataReducer as a default export:

import userDataReducer from '../utils/UserDataSlice'

But in your userDataSlice file, you are exporting the userDataReducer as a named export:

export default userDataSlice.reducer;

Try changing the export statement in the userDataSlice file to export the userDataReducer as a named export:

export const userDataReducer = userDataSlice.reducer;

And then update the import statement in the store.js file to import the userDataReducer as a named export:

import { userDataReducer } from '../utils/UserDataSlice'

Leave a Reply