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!
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.