Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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'

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading