Expected the root reducer to be a function. Instead, received: '' - redux

I receive an error when following a YouTube crash course on redux:
redux.js:158 Uncaught Error: Expected the root reducer to be a function. Instead, received: ''
at createStore (redux.js:158:1) | at redux.js:682:1 | at createStore (redux.js:154:1) | at ./src/state/store.js (store.js:5:1)
I suspect the error is inside store.js, but I'm not able to debug it. And, why '' is returned? Very much grateful for your help.
store.js
import { legacy_createStore as createStore, applyMiddleware } from "redux";
import reducers from "./reducers/index"
import thunk from "redux-thunk"
export const store = createStore(
reducers,
{},
applyMiddleware(thunk)
)
reducers/index.js
import { combineReducers } from "redux";
import accountReducer from "./accountReducer";
const reducers = combineReducers ({
account : accountReducer
});
export default reducers;
reducers/accountReducer.js
const reducer = (state = 0, action) => {
switch (action.type) {
case "deposit":
return state + action.payload;
case "withdraw":
return state - action.payload;
default:
return state
}
};
export default reducer;
App.js
import {useSelector, useDispatch} from "react-redux"
import {bindActionCreators} from "redux"
import {actionCreators} from "./state/index"
function App() {
const account = useSelector((state) => state.acoount );
const dispatch = useDispatch()
const {depositMoney, withdrawMoney} = bindActionCreators(actionCreators, dispatch)
return (
<div className="App">
<h1>{account}</h1>
<button onClick={() => depositMoney(1000)}>Deposit</button>
<button onClick={() => withdrawMoney(1000)}>Withdraw</button>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App' ;
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import {store} from './state/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store = {store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();

Related

You are using legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore()

I am getting error while facing redux-toolkit with nexjs.
The warning message is like
You are using legacy implementation. Please update your code: use
createWrapper() and wrapper.useWrappedStore()
I tried a few solutions which i found online, but still getting the same warning. Here is my code below
_app.tsx
import Head from "next/head";
import { useEffect } from "react";
import { reduxWrapper } from "../store/wrapper";
import { Provider } from "react-redux";
import "../styles/tailwind.css";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
const { store } = reduxWrapper.useWrappedStore(pageProps);
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}
export default reduxWrapper.withRedux(MyApp);
reduxWrapper file
import {configureStore} from '#reduxjs/toolkit'
import createSagaMiddleware from 'redux-saga'
import {createWrapper} from 'next-redux-wrapper'
import rootReducer from './reducer'
import initialState from './state'
import rootSaga from './saga'
declare module 'redux' {
export interface Store {
sagaTask: any
}
}
const USE_DEV_TOOLS = process.env.NODE_ENV !== 'production'
export const makeStore = (context) => {
const sagaMiddleware = createSagaMiddleware()
const store = configureStore({
reducer: rootReducer,
preloadedState: initialState,
middleware: [sagaMiddleware],
devTools: USE_DEV_TOOLS
})
store.sagaTask = sagaMiddleware.run(rootSaga)
return store
}
export const reduxWrapper = createWrapper(makeStore)

TypeError: Object(...) is not a function on index.js

Hi i get this error when in my browser when i run my code:
TypeError: Object(...) is not a function
./src/index.js
src/index.js:31
28 | firebaseStateName: 'firebase'
29 | }
30 | const initialState = {};
31 | const store = createStore(rootReducer,initialState,
32 | compose(
33 | applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
34 | reactReduxFirebase(firebase, config),
i tryed using thing libary:
http://docs.react-redux-firebase.com/history/v3.0.0/docs/integrations/thunks.html
however still no succes :/
below my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './store/reducers/rootReducer'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { createFirestoreInstance, reduxFirestore, getFirestore } from 'redux-firestore';
import { ReactReduxFirebaseProvider, reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import fbConfig from './config/fbconfig'
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
import 'firebase/functions'
firebase.initializeApp(fbConfig);
firebase.firestore();
firebase.storage().ref();
firebase.functions();
const config = {
useFirestoreForProfile:true,
userProfile: 'Klanten',
userFirestoreForProfile: true,
attachAuthIsReady: true,
firebaseStateName: 'firebase'
}
const initialState = {};
const store = createStore(rootReducer,initialState,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
reactReduxFirebase(firebase, config),
reduxFirestore(firebase)
)
)
store.firebaseAuthIsReady.then(() => {
const rrfProps = {
firebase,
config: fbConfig,
dispatch: store.dispatch,
createFirestoreInstance
}
ReactDOM.render(<Provider store={store}><ReactReduxFirebaseProvider {...rrfProps}><App /></ReactReduxFirebaseProvider></Provider>, document.getElementById('root'));
serviceWorker.unregister();
})
this is my rootReducer.js
import authReducer from './authReducer'
import shopReducer from './shopReducer'
import { combineReducers } from 'redux'
import { firebaseReducer } from 'react-redux-firebase'
import { firestoreReducer } from 'redux-firestore'
const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer,
auth: authReducer,
shop: shopReducer
})
export default rootReducer
This is where your problem is:
reactReduxFirebase(firebase, config),
reduxFirestore(firebase)
There has been a little change in the configuration in the latest version, which you must use if you're using react V6.
*Make sure you install the latest version by typing:
npm i --save react-redux-firebase#next
http://docs.react-redux-firebase.com/history/v3.0.0/docs/v3-migration-guide.html
+ import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
+ import { createFirestoreInstance } from 'redux-firestore'
- import { reactReduxFirebase } from 'react-redux-firebase' // removed
- import { reduxFirestore } from 'redux-firestore' // removed
const store = createStore(
rootReducer,
initialState,
compose(
- reactReduxFirebase(firebase, rrfConfig), // removed
- reduxFirestore(firebase)
// applyMiddleware(...middleware) // removed
)
)
+ const rrfProps = {
+ firebase,
+ config: rrfConfig,
+ dispatch: store.dispatch,
+ createFirestoreInstance // <- needed if using firestore
+ }
const App = () => (
<Provider store={store}>
+ <ReactReduxFirebaseProvider {...rrfProps}>
<Todos />
+ </ReactReduxFirebaseProvider>
</Provider>
);

Error with Store

It's my error:
And it's my component:
import React from 'react';
import { render } from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import { store } from './_helpers';
import {App} from './App';
render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
It's my store i export and import it to App.js
import { createStore, combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';
const reducer = combineReducers({
form: reduxFormReducer, // mounted under "form"
});
const store = (window.devToolsExtension
? window.devToolsExtension()(createStore)
: createStore)(reducer);
export default store;
Where should i add store with Provider to works well?
I change structure of store and now it's working:
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../_reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
const loggerMiddleware = createLogger();
export const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(
thunkMiddleware,
loggerMiddleware
)
));
As you are exporting store as default you have to import it without courly braces as follow:
import store from './_helpers';
Hope it helps.

isssue with redux and apollo 2.x.x

How should I use redux with apollo 2.x.x beside graphql ?
I have this error
"configureStore.js:11 Uncaught TypeError: Cannot read property 'reducer' of undefined
at ./src/store/configureStore.js.exports.default"
and it seems to be related to the cache instanse of apollo
import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./routers/AppRouter";
import registerServiceWorker from "./registerServiceWorker";
// 1
import { ApolloProvider } from "react-apollo";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloLink } from 'apollo-client-preset';
import {AUTH_TOKEN} from './lib/constants';
import configureStore from './store/configureStore';
import "./styles/App.css";
const httpLink = new HttpLink({ uri: "http://localhost:3000/graphql" });
const middlewareAuthLink = new ApolloLink((operation, forward) => {
const token = localStorage.getItem(AUTH_TOKEN);
const authorizationHeader = token ? `Bearer ${token}` : null
operation.setContext({
headers: {
authorization: authorizationHeader
}
})
return forward(operation)
})
const httpLinkWithAuthToken = middlewareAuthLink.concat(httpLink)
console.log("httpLink",httpLink);
console.log("httpLinkWithAuthToken",httpLinkWithAuthToken);
const store =configureStore();
export const client = new ApolloClient({
link: httpLinkWithAuthToken,
cache: new InMemoryCache()
});
const jsx = (
<ApolloProvider store={store} client={client}>
<AppRouter />
</ApolloProvider>
);
ReactDOM.render(jsx, document.getElementById("app"));
registerServiceWorker();
and the store in configured in this way :
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import {client} from "../app";
import thunk from "redux-thunk";
import { ApolloClient } from "apollo-client";
export default ()=>{
const store =createStore(
combineReducers({
// classes:classes ,
apollo:client.reducer(),
}),
{}, //initial state
compose(
applyMiddleware(client.middleware()),
thunk.withExtraArgument(client),
// If you are using the devToolsExtension, you can add it here also
(typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined') ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
)
);
return srore;
}

No reducer provided for key "dashboard"

when i tried user store in my test
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { mount } from 'enzyme';
import chai from 'chai';
import App from '../layouts/App';
import store from '../redux/configureStore';
const expect = chai.expect;
// let store;
let app;
describe('login', () => {
beforeEach(() => {
app = mount (
<Provider store={store}>
<App />
</Provider>
)
})
but i got No reducer provided for key "dashboard"
here is my configStore main code
const reducer = {
dashboard,
PageLogin,
};
const store = createStore(
reducer,
composeEnhancers(applyMiddleware(sagaMiddleware))
);
I got PageLogin, but can't got dashboard
and there is dashboard main code
export {
snackbarActions,
dialogActions,
userConfigActions,
authActions,
progressActions,
UserProfileActions,
// ...
};
You need to use combineReducers to combine your reducers
import { combineReducers } from 'redux'
const reducer = combineReducers({
dashboard,
PageLogin,
})

Resources