Search code examples
javascriptreactjsreduxredux-toolkit

Store does not have a valid reducer when using redux-toolkit


I'm having some trouble with redux-toolkit configureStore function, whenever I try to call dispatch on a page it gives me the 'Store does not have a valid reducer' error. I suppose my imports are right and also the store is in the upper level of my index.js file.

This is how it's looking:

store.js file:

import { configureStore } from "@reduxjs/toolkit";
import bookReducer from "../reducers/book";

export default configureStore({
  reducer: { books: bookReducer }
});

book.js file:

import { createSlice } from '@reduxjs/toolkit'

export const bookSlice = createSlice({
  name: 'books',
  initialState: {
    bookList: []
  },
  reducers: {
    getBookSuccess: (state, action) => console.log(action.payload),
    getBookFailure: (state, action) => console.log(action.payload),
    setLoading: (state, action) => ({ ...state, loadingTarget: action.loadingTarget, loadingType: action.loadingType })
  }
})

export const { getBookSuccess, getBookFailure, setLoading } = bookSlice.actions;

export default bookSlice.reducer;

index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import store from './app/store';
import { Provider } from 'react-redux';
import './fontAwesome'

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

Thanks in advance!


Solution

  • Actually it was my mistake, there was two stores (one from the template). I was importing the original one instead of the one I created.