CODEWITHSUNDEEP
reactjsreact-redux
k16style
k16style

Reputation: 163

React - TypeError: baseReducer is not a function

im making a SPA using React. I want the states persits after page refresh so i used 'redux-persist'. I dont know if my import 'allReducers' is wrong because the message i recived is TypeError: baseReducer is not a function

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.jsx';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import {applyMiddleware, combineReducers, createStore} from "redux";
import {persistReducer, persistStore} from 'redux-persist';
import allReducers from './redux/store'
import {PersistGate} from 'redux-persist/integration/react';
import storage from 'redux-persist/lib/storage';
import thunk from "redux-thunk";


const persistConfig = {
    key: 'root',
    storage,
};

const persistedReducer = persistReducer(persistConfig, allReducers);
let store = createStore(persistedReducer, applyMiddleware(thunk));
let persistor = persistStore(store);


ReactDOM.render(<Provider store={store}>
                    <PersistGate loading={null} persistor={persistor}>
                        <App />
                    </PersistGate>
                </Provider>, document.getElementById('root'));

but finally when the page is rendered i got this message TypeError: baseReducer is not a function

This is ./redux/store

import { applyMiddleware, combineReducers, createStore } from 'redux'
import { ADD_TO_CART, GET_COURSE_LIST, USUARIO_LOGIN } from './action'
import { composeWithDevTools } from 'redux-devtools-extension'
import { persistStore, persistReducer } from 'redux-persist'
import thunk from 'redux-thunk'



const initialCart = {
    cart:[]
}

const initialCourses ={
    courses:[]
}

const initialUser ={
    user:{}
}

const cartReducer = ( state = initialCart,action) => {
    console.log(action)

    if(action.type===ADD_TO_CART)
    {

        if(state.cart.find(c=>c===action.id)) 
        {
            return state
        }

        return{
            ...state,
            cart: state.cart.concat(action.id),            
        }

    }
    return state

}

const coursesReducer = (state=initialCourses, action) =>{
    console.log(action)
    if(action.type === GET_COURSE_LIST){
        return {
            ...state,
            courses: action.courses
        }
    }
    return state
}

const userReducer = (state=initialUser, action)=>{
    console.log(action)
    if(action.type === USER_LOGIN){
        return {
            ...state,
            user: action.user
        }
    }
    return state

}

const storage = createStore(combineReducers({cartReducer, coursesReducer, userReducer}), composeWithDevTools(applyMiddleware(thunk)))

export default storage

Upvotes: 3

Views: 11592

Answers (3)

Seth Snr
Seth Snr

Reputation: 11

For me, I had to wrap my rootReducer with combineReducers

Before:

const rootReducer = {
// my reducers
}

After:

const rootReducer = combinedReducers({
// my reducers
})

Upvotes: 0

Amit
Amit

Reputation: 2735

It happened to me that I was using store.dispatch() in a functional component instead of a direct dispatch() from useDispatch.

Watch out.

Upvotes: 1

cbr
cbr

Reputation: 13662

The persistReducer function expects a reducer, not a store.

You could export your reducer from the store file separately, or just export it as default if you're only using the persisted store. Here's an example of exporting it separately:

./redux/store:

export const rootReducer = combineReducers({cartReducer, coursesReducer, userReducer})

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
export default store

Your root component file:

import { rootReducer } from './redux/store'

// ...

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, applyMiddleware(thunk));
const persistor = persistStore(store);

Upvotes: 8

Related Questions