I have a complex analytics html page, I have converted most of the elements into react components, most of my elements are organized into two sections top / bottom.
My setup is working, yet, I'm wondering if this is legal / correct way of setting things up?
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import TopSection from './components/app';
import BottomSection from './components/app_content';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
// Top Section
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<TopSection />
</Provider>
, document.querySelector('.top-section'));
// Bottom Section
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BottomSection />
</Provider>
, document.querySelector('.bottom-section'));
You can have multiple store if it is really needed. But it is strongly recommoneded to NOT go with multiple store setups. Single store is always best choice because,
it's reliable
it's fast
debugging is easy
Here are the links, why multiple store setup is not recommended.
redux.js.org
stackoverflow.com
Related
So I'm trying out Next.Js 13 and I'm getting some strange behavior with the redux provider. Instead of seeing my slices of state, I'm seeing some objects called tree,cache,prefetchCache, pushRef, focusAndScrollRef, and canonicalUrl. I'm also fairly new to Next.JS regardless. Here's my setup:
// client/app/layout.tsx
import React from "react";
import Providers from "./providers";
'use client' // <-- tried with both use client and without
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<Providers>
{children}
</Providers>
</body>
</html>
);
}
// client/app/providers.tsx
'use client'
import React from 'react'
import { Provider } from 'react-redux'
import {store} from '../src/redux/store'
const Providers = ({children}:React.PropsWithChildren) => {
return (
<Provider store={store}>
{children}
</Provider>
)
}
export default Providers
I am new on redux.I want to implement redux on react. I have created todo list and it is working well with redux.As a practice I have created a new component called Calculate to increase and decrease a number under the todo list.I have two reducer for that.I combined two reducers in index.js.But as far as I understand combining is not working. I face with error like that "
TypeError: this.props.messages.map is not a function".But when without combining the reducers,and sending only messaageReducer to store, my app working well.Here is my code.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import messageReducer from "./reducers/reducers"
import {Provider} from "react-redux"
import {combineReducers, createStore} from "redux"
import Calculate from "./calculate"
import counter from "./reducers/reducers2"
const rootReducer = combineReducers({
counter,
messageReducer,
})
const store = createStore(rootReducer)
ReactDOM.render(
<Provider store={store}>
<App />
<Calculate/>
</Provider>,
document.getElementById('root')
);
combineReducers changes the shape of your store.
What was state.X before is now state.messageReducer.X.
That's also, why messageReducer is a bad name here.
Do
const rootReducer = combineReducers({
counter,
message: messageReducer,
})
instead and it will become state.message.X.
Also, please note that if you are doing all this by hand, you are probably learning an old style of Redux and are problably following outdated documentation. While this shows very well what Redux does internally, in modern Redux you should not be doing all this by hand. Please follow the official Redux tutorials at https://redux.js.org/tutorials/essentials/part-1-overview-concepts
Running npm run build outputs a diffrent css compiled website than when running npm start what's the difference and why does it happen? The posts i found were about changing webpack.config but i know that create-react-app work a bit differently. May you shine some light?
My app.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {store, persistor} from './Reducers/configStore'
import {PersistGate} from 'redux-persist/integration/react'
import './index.css';
import './App.css';
import "normalize.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import "#blueprintjs/core/lib/css/blueprint.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
import 'react-notifications-component/dist/theme.css';
require('dotenv').config();
const Piazeta = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
)
}
ReactDOM.render(<Piazeta />, document.getElementById('root'));
The problem was that in the development build the bootstrap css was overwriting the css written by me and in the production build it was the other way around. I had a couple of things named the same which made the problems appear. Double check your css every time i guess, the order of them differs in prod and build
The Problem
I have a React app that is deployed to Heroku that uses create-react-app to do all of the bundling in the background.
I am using a Node.js backend written in Typescript running node version 10.15.3
When I serve my site locally in development everything goes fine. I run npm start and the website serves correctly and looks like this:
The site also looks the same on staging & production.
But when I look at the site on my mobile device I see:
I have reached out to Heroku support and they told me that they didn't know what was going on.
It seems that all problems with this online are solved for people using Ruby & I haven't seen a single person using React run into this.
All the right files exist in the build folder.
Also, here is my index.js:
import LoadingIndicator from './components/elements/LoadingIndicator';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore, persistReducer } from 'redux-persist';
import { BrowserRouter as Router } from "react-router-dom";
import { StripeProvider } from 'react-stripe-elements';
import storage from 'redux-persist/lib/storage';
import * as Environment from './Environment';
import App from './components/App';
import ReactDOM from 'react-dom';
import React from 'react';
import './index.css';
import { Provider } from 'react-redux';
import middleware from './middleware';
import rootReducer from './reducers';
import { createStore } from 'redux';
const persistConfig = {
key: 'app',
storage
}
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, middleware);
const persistor = persistStore(store);
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={<LoadingIndicator />} persistor={persistor}>
<StripeProvider apiKey={Environment.get("STRIPE_PUBLIC_KEY")}>
<Router>
<App />
</Router>
</StripeProvider>
</PersistGate>
</Provider>,
document.getElementById('root')
);
And my folder structure:
Resources I Have Referenced:
Create React App Deployment
Creating A Production Build
Create React App Deployment (Heroku Section)
Checking The Heroku App's File System
CSS Is Looking Different On Heroku
Heroku Messes Up Styles
I forgot to add <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> to the <head> section in my index.html file.
Not sure how it loaded locally...probably because I have the font on my laptop? Not sure but that made it work.
It was not anything to do with CSS not loading or being served.
I've built a fairly simple React app based on create-react-app which uses the Material-UI for its interface components. It also depends on one of my own packages which also uses Material-UI (same version) for a couple of shared components.
Things were looking good locally until I ran a production build and deployed it. Some of the styles were behaving oddly, for example the Material-UI grid was much narrower than when running locally.
I did some reading and found a few instances of people discussing colliding class names under my scenario. This took me to some official Material-UI documentation which provides the following example code to use a custom class name prefix:
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
productionPrefix: 'c',
});
function App() {
return (
<JssProvider generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
Before applying this fix when inspecting my production app's source code I could see the outermost DIV using the CSS class jss2 jss24.
After applying this fix my production app actually visually renders the same layout as my development version and so would appear to be fixed. However, examining the source shows the outermost DIV to have the class MuiGrid-container-2 MuiGrid-spacing-xs-8-24 which suggests to me something isn't right. I could leave it like this but it does mean I'm running with unoptimised code.
Am I doing something wrong here? Or is there an alternative resolution? I'm using current latest version of #material-ui/core (3.3.2) and the full contents of my App.js are:
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { OidcProvider } from 'redux-oidc';
import JssProvider from 'react-jss/lib/JssProvider';
import Routes from './routes';
import store from './store';
import userManager from './utils/userManager';
import {
CustomUiTheme as Theme,
CustomUiLayout as Layout,
CustomUiSnackbar as Snackbar,
CustomUiModalAlert as Alert
} from 'custom-ui';
import Loading from './components/loading';
import { createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
dangerouslyUseGlobalCSS: true,
productionPrefix: 'tw',
});
class App extends Component {
render() {
return (
<JssProvider generateClassName={generateClassName}>
<Provider store={store}>
<OidcProvider store={store} userManager={userManager}>
<Theme>
<Loading />
<Layout variant="xmas">
<Alert />
<Routes />
<Snackbar />
</Layout>
</Theme>
</OidcProvider>
</Provider>
</JssProvider>
);
}
}
export default App;