I did the exact instructions in this post: https://medium.com/#samueldinesh/setting-up-redux-devtools-a-simple-guide-3b386a6254fa
The error I got was:
This is my code:
import {StrictMode} from 'react'
import {createRoot} from 'react-dom/client'
import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import App from './App'
import './styles/globals.css'
import { store } from './store/store'
import { Provider } from 'react-redux'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
const rootElement = document.querySelector('#main')
const root = createRoot(rootElement)
const currentStore = createStore(
store,
composeWithDevTools()
)
root.render(
<StrictMode>
<Provider store={currentStore}>
<Router>
<Routes>
<Route path="/*" element={<App />} />
</Routes>
</Router>
</Provider>
</StrictMode>
)
What did I miss?
you are passing a store here. you should be passing rootReducer
const currentStore = createStore(
store,
composeWithDevTools()
)
// according to the link
const currentStore = createStore(
rootReducer,
composeWithDevTools()
)
Related
In my react application, I created store.js and rootreducer.js for it. Before creating the store.js and rootreducer.js file, my react application was working properly but after adding it, I'm actually not getting any error but my output on the local host is blank now. For including the store and reducer in my application I have imported the provider and store to my app.js file. If I remove them, my react application works properly but with these imports, I get a blank screen in my localhost. Below given is my store.js file
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './Reducer/rootReducer';
const initialState = {}
const middleWare = [thunk]
let store;
if (window.navigator.userAgent.includes("Chrome")) {
store = createStore(rootReducer,
initialState,
compose(applyMiddleware(...middleWare),
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
))
} else {
store = createStore(rootReducer,
initialState,
compose(applyMiddleware(...middleWare)))
}
export default store;
And this is my app.js file
import React from 'react';
import './App.css';
import Nav from './Component/Common/Nav';
import 'bootstrap/dist/css/bootstrap.css';
import Welcome from './Component/Welcome';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './Component/Dashboard/Dashboard';
import CreateMonthWallet from './Component/Dashboard/DashboardOperations/CreateMonthWallet';
import NotFound from './Component/Common/NotFound';
import { Provider } from 'react-redux';
import store from './Store';
//import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<Provider store={store}>
<Router>
<div>
<Nav />
<Routes>
<Route path="/" element={<Welcome />} exact />
<Route path="/Dashboard" element={<Dashboard />} exact />
<Route path="/CreateMonthWallet" element={<CreateMonthWallet />} exact />
<Route path="*" element={<NotFound />} exact />
</Routes>
</div>
</Router>
</Provider>
);
}
export default App;
And this is my rootreducer.js file
import {combineReducers} from 'redux'
export default combineReducers({
});
you can add your store like this in app.js
your code
import store from './Store';
add this
import {store} from './Store';
hope this will help you!
/* im connecting my react with firebase and getting this error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
If i comment the (ReactReduxFirebaseProvider) it runs but still not working data isn't going into my firebase collection.
*/
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {createStore,applyMiddleware,compose} from "redux";
import rootReducer from './store/reducers/rootReducer';
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { getFirebase, ReactReduxFirebaseProvider } from "react-redux-firebase";
import {
getFirestore,
reduxFirestore,
createFirestoreInstance
}
from "redux-firestore";
import fbConfig from "./config/fbConfig";
import firebase from "firebase/app";
const store = createStore(
rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
reduxFirestore(firebase,fbConfig)
)
);
const config = {
userProfile: "students",
useFirestoreForProfile: true,
};
const rrfProps = {
firebase,
config,
dispatch: store.dispatch,
createFirestoreInstance,
};
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>,
document.getElementById("root")
);
reportWebVitals();
// This is the APP Component code
import FeedbackForm from './components/feedback/FeedbackForm';
import StudentDetails from './components/feedback/StudentDetails';
import './sass/main.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import MoreDetailsForm from './components/feedback/MoreDetailsForm';
import ThankYou from './components/feedback/ThankYou';
import Dashboard from './components/admin/dashboard/Dashboard';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={StudentDetails}/>
<Route exact path="/feedback" component={FeedbackForm} />
<Route exact path="/moredetails" component={MoreDetailsForm} />
<Route exact path="/thankyou" component={ThankYou} />
<Route exact path="/admin/dashboard" component={Dashboard}/>
</Switch>
</Router>
);
}
export default App;
Need help with sharing history between two ReactDOM.render conmonent. I did it with Redux but no lack with react-router v4.
Code: index.js -> firs ReactDOM.render
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {AppContextProvider} from './context';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import reducerReducer from "./store/reducers/reducer";
import mapReducer from './store/reducers/map';
import {BrowserRouter} from "react-router-dom";
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const rootReducer = combineReducers({
reducer: reducerReducer,
map: mapReducer
});
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));
ReactDOM.render(
<Provider store={store}>
<AppContextProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</AppContextProvider>
</Provider>,
document.getElementById('root')
);
Code: Map.js -> second ReactDOM.render
const popUpHTML = (
<Provider store={store}>
<Router history={createBrowserHistory}>
<PopUpClick
name={name}
img={img}
id={id}
/>
</Router>
</Provider>
);
const addPopup = (popUpHTML, coordinates) => {
const el = document.createElement('div');
// el.className = "marker";
ReactDOM.render(popUpHTML, el);
const mapboxGlPopup = new mapboxgl.Popup({
closeButton: false,
offset: 16,
anchor: 'top'
}).setDOMContent(el)
.setLngLat(coordinates)
.addTo(map);
}
addPopup(popUpHTML, coordinates);
So I need to get on click same URL history, now i gor just URL replace.
This is my rendered Components, and they are two whole new instance:
React Component in dev tools.
I just migrated to react-router, react-router dom v4.3.1, installed history v4.9. Earlier, all my components which were connected to the store, got router props. Now, they say that there must be a history prop. However, I dont get it anywhere, especially in App component.
Root:
import React, { Component } from "react";
import { Provider } from "react-redux";
// import { BrowserRouter, Route, browserHistory, Switch } from "react-router";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { hot } from 'react-hot-loader'
import { ConnectedRouter } from 'connected-react-router'
import configureStore, {history} from '../store/configureStore'
import App from "./App";
import Startpage from "./startpage";
import PatientSearch from "./routes/patient/patientSearch";
import Technician from "./routes/technician/technician";
import Notes from "./routes/notes/notes";
import DeliveryReports from './routes/admin/deliveryReports/reports'
const store = configureStore(/* provide initial state if any */)
class Root extends Component {
render() {
console.log('propsroot', this.props)
return (
<Provider store={store}>
<ConnectedRouter history={history}>
{/*<Router onUpdate={() => window.scrollTo(0, 0)}>*/}
<App>
<Switch>
<Route exact path="/" component={Startpage} />
<Route
component={PatientSearch}
path="/patient/search"
/>
<Route
component={Technician}
path="/technician"
/>
<Route
component={Notes}
path="/notes"
/>
<Route
component={DeliveryReports}
path="/delivery_reports"
/>
</Switch>
</App>
{/*</Router>*/}
</ConnectedRouter>
</Provider>
);
}
}
export default hot(module)(Root)
ConfigureStore:
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { connectRouter } from 'connected-react-router'
import promiseMiddleware from '../middleware/promiseMiddleware';
import loggerMiddleware from 'redux-logger';
import * as reducers from '../reducers/';
import { reducer as formReducer } from 'redux-form'
import app from '../reducers/app'
import {createBrowserHistory} from "history";
export const history = createBrowserHistory()
const reducer = combineReducers({...reducers.default, router:connectRouter(history), form:formReducer });
const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware,
promiseMiddleware
)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(
reducer,
initialState,
window.devToolsExtension && window.devToolsExtension()
);
if (module.hot) {
module.hot.accept('../reducers', () => {
const nextRootReducer = require('../reducers/index');
store.replaceReducer(nextRootReducer);
});
}
return store;
}
In App component I render routes with {children} props
The history prop is provided by your provider. To serialize it in you component's props use the withRoute HOC
I'm trying to connect react router v4 with redux but it's not working. I'm using withRouter as described in the docs, but props aren't available in my route components. Any idea?
Here's my code:
index.js
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { routerMiddleware } from 'react-router-redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
const logger = createLogger();
const middleware = [
thunk,
routerMiddleware(history)
];
if (process.env.NODE_ENV === 'development') {
middleware.push(logger);
}
// create store
const store = createStore(
reducers,
applyMiddleware(...middleware)
);
render(
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import { Switch, Route, Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
class App extends Component {
componentDidMount() {
this.props.fetchPages(API_PAGES);
this.props.fetchPosts(API_POSTS);
}
render() {
return (
!this.props.pages.isFetching ?
<div>
<ul>
{this.props.pages.data && this.props.pages.data.map(page => (
<li key={page.id}>
<Link to={page.slug}>{page.title.rendered}</Link>
</li>
))}
</ul>
<Switch location={this.props.location}>
<Route path={routes.HOME} exact component={Home} />
<Route path={routes.ABOUT} component={About} />
<Route path={routes.CONTACT} component={Contact} />
<Route path={routes.NEWS} component={News} />
<Route component={NotFound} />
</Switch>
</div> :
<p>Loading...</p>
);
}
}
function mapStateToProps(state) {
return state;
}
export default withRouter(connect(
mapStateToProps,
{ ...actions }
)(App));
reducers/index.js
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
export default combineReducers({
pages,
posts,
routing: routerReducer
});
components/Home.js
import React from 'react';
const Home = (props) => {
console.log('home', props);
return (
<div>
This is the home page.
</div>
);
};
export default Home;
You should pass the props to home component like this to make it available there,
<Route path={routes.HOME} exact component={(props)=><Home {...props} newProps={value you want to pass}/> }/>
Since you are using react-router v4 you need to be using react-router-redux v5. See here
This uses a different npm package to react-router-redux installed with:
npm install --save react-router-redux#next
The routing reducer should then have the router key (not routing) in combineReducers.
You will then need to use ConnectedRouter and pass in your history object like so...
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);