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.
Related
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)
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();
I've used Material UI quite a lot, so this is baffling. I've looked through the docs, I've checked my code, I can't see the issue. I want my H2 tag in the nested component to use Arial. However, it's rendering using Times. I'm not sure why.
Here's my index.tsx:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import configureStore from "./redux/stores/main";
import * as serviceWorker from "./serviceWorker";
import { createMuiTheme } from "#material-ui/core";
import myTheme from "./styling/mainTheme";
import { ThemeProvider } from "#material-ui/styles";
const theme = createMuiTheme({
typography: {
fontFamily: ["Arial"].join(",")
}
});
ReactDOM.render(
<ThemeProvider theme={theme}>
<Provider store={configureStore()}>
<App />
</Provider>
</ThemeProvider>,
document.getElementById("root")
);
serviceWorker.unregister();
My app component:
import React from "react";
import { useSelector } from "react-redux";
import HeaderContainer from "../containers/layout/header/HeaderContainer";
import { ThemeProvider, useTheme } from "#material-ui/styles";
import theme from "../styling/mainTheme";
import { createMuiTheme } from "#material-ui/core";
const App: React.FC = () => {
const theme = useTheme();
return (
<div className="App">
<HeaderContainer />
</div>
);
};
export default App;
The header container (will contain logic):
import * as React from 'react';
import Header from '../../../components/layout/header/Header';
export interface HeaderContainerProps {
}
export default class HeaderContainer extends React.Component<HeaderContainerProps> {
public render() {
return <Header />
}
}
And finally the header:
import * as React from "react";
import { styled } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
export default function Header() {
return (
<AppBar>
<h2>Hello</h2>
</AppBar>
)
}
I've tried putting the ThemeProvider in different components, but my h2 is still rendering as Times. Would be great if someone could spot the issue. Thanks
Checking the documents of material-ui it turns out you have imported some of the things from library in a wrong way. Like the docs state -
import { useTheme } from '#material-ui/core/styles';
import { createMuiTheme } from '#material-ui/core/styles';
Which can basically be
import { useTheme, createMuiTheme } from '#material-ui/core/styles';
Same goes for ThemeProvider
import { ThemeProvider } from '#material-ui/core/styles';
In MUI V5 you need to import ThemeProvider and createTheme from #mui/material/styles instead of #mui/styles.
import * as React from 'react';
import ReactDOM from 'react-dom';
import {red} from '#mui/material/colors';
import { ThemeProvider, createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: red[500],
},
},
});
function App() {
return <ThemeProvider theme={theme}>...</ThemeProvider>;
}
ReactDOM.render(<App />, document.querySelector('#app'));
source
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>
);
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,
})