I stuck with this error:
Uncaught Error: Expected the root reducer to be a function. Instead, received:''
I've tried every answer I could find but none of them worked, I hope you guys can help me
My rootReducer
import {combineReducers} from 'redux'
import changeCategoryReducer from './changeCategoryReducer'
import categoryListReducer from './categoryListReducer'
import productListReducer from './productListReducer'
import cartReducer from './cartReducer'
import saveProductReducer from './saveProductReducer'
const rootReducer = combineReducers({
changeCategoryReducer,
categoryListReducer,
productListReducer,
cartReducer,
saveProductReducer
});
export default rootReducer;
configure Store
import {createStore, applyMiddleware} from 'redux'
import * as rootReducer from './index.js'
import thunk from 'redux-thunk'
export default function configureStore(){
return createStore(rootReducer, applyMiddleware(thunk))
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/root/App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from 'react-redux'
import configureStore from './redux/reducers/configureStore'
import 'alertifyjs/build/css/alertify.min.css'
import { BrowserRouter } from 'react-router-dom'
const store = configureStore();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
You're not correctly importing your rootReducer in the store creation.
Instead of importing *, you should import the default export:
import {createStore, applyMiddleware} from 'redux'
import rootReducer from './index.js' // <-- change here
import thunk from 'redux-thunk'
export default function configureStore(){
return createStore(rootReducer, applyMiddleware(thunk))
}
using import * as rootReducer from './index.js' means you end up with an object like:
rootReducer: {
default: createReducer(...)
}
Related
I have added redux-persist in my code and it isn't persisting the state, instead I am always getting the initial state.
Here's the code of my root-reducer
import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import userReducer from "./Users/user-reducer";
import cartReducer from "./Cart/cart-reducer";
const persistConfig = {
key: "root",
storage,
whitelist: ["cart"],
};
const rootReducer = combineReducers({
user: userReducer,
cart: cartReducer,
});
export default persistReducer(persistConfig, rootReducer);
and this is my store.js file
import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import rootReducer from "./root-reducer";
import { persistStore } from "redux-persist";
const middlewares = [logger];
export const store = createStore(rootReducer, applyMiddleware(...middlewares));
export const persistor = persistStore(store);
Here's my index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { store, persistor } from "./redux/Store";
import { PersistGate } from "redux-persist/integration/react";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</BrowserRouter>
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
Whenever I am refreshing my page with the initial state, I am getting rehydrated: true but after firing some action I am getting rehydrated: false.
Check your reducer.js and make sure the bottom of the reducer in the file is
default:
return state;
and not
default:
return {
...state,
};```
Im adding Redux persist into my applcaition for local storage. I believe ive followed the implementation correctly and i keep getting the error:
Cannot read property 'subscribe' of undefined TypeError: PersistGate.componentDidMount
node_modules/redux-persist/es/integration/react.js:76
Here is my code.
store.js
import { createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import logger from 'redux-logger';
import rootReducer from './root.reducer';
const middlewares = [logger];
export const store = createStore(rootReducer, applyMiddleware(...middlewares));
export const persistor = persistStore(store);
export default { store, persistor };
root.reducer.js
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import userReducer from './user/user.reducer';
import cartReducer from './cart/cart.reducer';
const persistConfig = {
key: 'root',
storage,
whitelist: ['cart']
}
const rootReducer = combineReducers({
user: userReducer,
cart: cartReducer
});
export default persistReducer(persistConfig, rootReducer);
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import Store from './redux/store';
ReactDOM.render(
<Provider store={Store.store}>
<BrowserRouter>
<PersistGate persistor={Store.persistor} />
<App />
<PersistGate/>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
Syntax was off in index.js PersisGate wrapper.
Correct syntax is
<PersistGate persistor={Store.persistor}>
<App />
</PersistGate>
you messing something which is:
import {store,persistor} from "./redux/store";
<Provider store = {store} >
<Router >
<PersistGate loading = {null} persistor = {persistor}>
<App />
</PersistGate>
</Router>
</Provider>
i hope this solution help somone
I want to keep my state data as it is even after browser refresh. For that i'm using Redux Persist (https://www.npmjs.com/package/redux-persist#basic-usage) library. When implementing this library i'm getting undefined for the current states in the reducers. For ex:
TypeError: Cannot read property 'modalType' of undefined
What am i doing wrong in the following code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import { routerMiddleware } from 'react-router-redux';
import ReducerStore from './reducers/rootReducer.js';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { Router } from 'react-router-dom';
import history from './history';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
const persistConfig = {
key: 'root',
storage,
}
const persistedReducer = persistReducer(persistConfig, ReducerStore)
const middleware = routerMiddleware('');
const store = createStore(persistedReducer, composeWithDevTools(
applyMiddleware(middleware, thunk),
))
const persistor = persistStore(store);
ReactDOM.render(<Provider store={persistor}><Router history={history}><App /></Router></Provider>, document.getElementById('root'));
I was missing PersistGate. Once adding it i was able to make it work
import {PersistGate} from 'redux-persist/integration/react'
and then
ReactDOM.render(<Provider store={store}><PersistGate loading={null} persistor={persistor}><Router history={history}><App /></Router></PersistGate></Provider>, document.getElementById('root'));
used create-react-app but different css are not applied..
Eg:
Expectation : see style elements in inspect menu
Reality:actually what i get
I don't know why there is always conflict in css+react
I applied only one css here but in actually there were 3 css to be applied but it is not applied correctly.
index.js :
import "./assets/css/style.css";
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import * as serviceWorker from "./serviceWorker";
import rootSaga from "./sagas";
import { rootReducer } from "./reducers";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
//import "./styles/font-awesome.css";
import "font-awesome/css/font-awesome.css";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(sagaMiddleware))
);
sagaMiddleware.run(rootSaga);
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<div id="wrapper">
<App />
</div>
</Provider>
</BrowserRouter>,
document.getElementById("root")
);
serviceWorker.unregister();
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I am getting the following error on my react-redux & redux-persist setup:
The above error occurred in the component: in Connect(App) (created by
Route) in Route (created by withRouter(Connect(App))) in
withRouter(Connect(App)) in Router (created by BrowserRouter) in
BrowserRouter in PersistGate in Provider
I have it setup like this:
store.js
import {applyMiddleware, createStore} from 'redux';
import {persistStore,persistCombineReducers} from 'redux-persist';
import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native
import { logger } from 'redux-logger';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import reducer from './reducers'
const middleware = applyMiddleware(promise(), thunk, logger);
const config = {
key: 'root',
storage,
};
const reducers = persistCombineReducers(config, {reducer});
export const configureStore = () => {
const store = createStore(reducers, middleware);
const persistor = persistStore(store);
return { persistor, store };
};
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import './css/app.css';
import App from './containers/App';
import { PersistGate } from 'redux-persist/es/integration/react'
import configureStore from './store';
const { persistor, store } = configureStore()
ReactDOM.render(
<Provider store={store} >
<PersistGate persistor={persistor}>
<BrowserRouter>
<App/>
</BrowserRouter>
</PersistGate>
</Provider>,
document.getElementById('root')
);
App.js
import React from 'react'
import { withRouter, Switch, Route } from 'react-router-dom'
import { connect } from 'react-redux'
...
#withRouter
#connect((store) => {
return {
isAuthenticated: store.auth.isAuthenticated,
};
})
export default class App extends React.Component {
render() {
...
}
}
UPDATE 1
Full console log
UPDATE 2
Is this the right way to declare the reducer? It works fine without redux-persist
authReducer.js
export default function reducer(state = {
isAuthenticated: false
}, action) {
...
}
UPDATE 3
REHYDRATE console log
UPDATE 4
index.js (in reducers folder)
import { combineReducers } from 'redux';
import user from './userReducer';
import auth from './authReducer';
export default combineReducers({
user,
auth
})
So the problem was that one should not use both combineReducers and persistCombineReducers in one go. Similar situation could be found here https://github.com/rt2zz/redux-persist/issues/516