fist thanks for your attention.
I am trying to use fela for dynamically styling my component. Also for manage the states of app, we need to use redux. In fela we need to use a Provider to wrap all component of app. also in redux we have the same thing. for example the root of the app we have :
import { createRenderer } from 'fela'
import { Provider } from 'react-fela'
import { render } from 'react-dom'
import React from 'react'
const renderer = createRenderer()
render(
<Provider renderer={renderer}>
<App />
</Provider>,
document.getElementById('app')
)
and in root of redux app we have:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
And my problem is how to use this packages together.
when use as syntax in import can solve this problem. for example:
import React from 'react'
import { render } from 'react-dom'
import { Provider as ReduxProvider } from 'react-redux'
import { Provider as FelaProvider } from 'react-fela'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<ReduxProvider store={store}>
<FelaProvider>
<App />
</FelaProvider>
</ReduxProvider>,
document.getElementById('root')
)
Related
index.js file:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();
store.js file:
import { configureStore } from '#reduxjs/toolkit';
import userReducer from '../features/userSlice';
export default configureStore({
reducer: {
user: userReducer,
},
});
ERROR:- ERROR in ./src/index.js 16:11-16
export 'store' (imported as 'store') was not found in './app/store'
(possible exports: default)
You export store as default export you need to import it as default
index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();
You are wrong coming from two reasons:
Reason number one: you already export the store as default and you import it with {} the first thing you should remove is the {}. to be like below:
import store from './app/store';
Reason number one:
Write store in capital letters to be Store finally to be like below:
import Store from './app/store';
This is my index.js code
import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import "#fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { createStore } from "redux";
import { userReducer } from "../src/reducers/UserReducer";
import { Provider } from "react-redux";
import { loadState, saveState } from "./store/LocalStorage";
const persistedState = loadState();
let store = createStore(userReducer, persistedState);
store.subscribe(() => saveState(store.getState()));
render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
This is the error I am getting on browser
"Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app."
Please help me with some solution.
I guess you are using React Router 6. They dropped support for nested Routers(like MemoryRouter inside of BrowserRouter or any other combinations)
https://github.com/remix-run/react-router/issues/7375
There is rather a hack with <UNSAFE_LocationContext.Provider but as name suggests it's not guaranteed this will work for any(even patch version) updates.
I suggest you either going back to V5 or getting rid of nesting.
I'm setting up a React Redux with a Provider but it always comes back with an error message saying that ./store not being found. What I'm doing wrong here? and What do I need to set up in index.js file?
This is first I have looked at the React.js Redux website to tried to set up Provider and setup react-cookies.
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/main.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux'
import { CookiesProvider } from 'react-cookie';
import store from './store'
const rootElement = document.getElementById('cantainer')
ReactDOM.render(
<Provider store={store}>
<CookiesProvider>
<App />,
rootElement
</CookiesProvider>
</Provider>
);
serviceWorker.unregister();
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/main.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux'
import { CookiesProvider } from 'react-cookie';
import store from './store'
const rootElement = document.getElementById('cantainer')
ReactDOM.render(
<Provider store={store}>
<CookiesProvider>
<App />,
rootElement
</CookiesProvider>
</Provider>
);
This is error message:
./src/index.js
Module not found: Can't resolve './store' in '/Users/mirasmith/Desktop/KPV1-Project-master/src'
I am trying to add the react sticky header to my stepper.
if I try to render bot the components together I am getting an error.
so I debugged and rendering separately.
when I render separately I am not facing an error. store is not defined
can you tell me how to fix it.
so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/y2kjpl343z
index.js
import React from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from 'redux'
// const store = createStore(
// reducer,
// applyMiddleware(thunk, logger)
// )
//ReactDOM.render(<Demo />, document.querySelector("#root"));
render(
<Provider store={store}>
<App />
<Demo />
</Provider>,
document.getElementById("root")
);
You have to define a redux store to pass down to the Provider component.
To define a store, you need to have at least a reducer, I am going to create a fake one now, you'll create your own later:
import React from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore } from 'redux'
const reducer = () => ({})
const store = createStore(reducer)
render(
<Provider store={store}>
<App />
<Demo />
</Provider>,
document.getElementById("root")
);
Update after your comment
If you don't need to use redux, just use a div, or better, a Fragment:
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
ReactDOM.render(
<Fragment>
<App />
<Demo />
</Fragment>,
document.getElementById("root")
);
Because you didn't create a store using the redux function : createStore. Before being able to use redux, you first need to create a reducer to give to your Provider.
Example from the documentation :
import { createStore } from 'redux'
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([action.text])
default:
return state
}
}
const store = createStore(todos, ['Use Redux'])
render(
<Provider store={store}>
<App />
<Demo />
</Provider>,
document.getElementById("root")
);
You are passing a store variable to the Provider component, but never define it.
Create new file:
import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
const rootReducer = combineReducers({
// You can fill here all the states that you want
})
export const store =
createStore(
rootReducer,
compose(
applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f)
);
Now import the file to your index.js
import store from './store';
I'm working on a Universal React project, my client entry point is:
import React from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import {AppContainer} from 'react-hot-loader'
import {Router, browserHistory} from 'react-router'
import {syncHistoryWithStore} from 'react-router-redux'
import {addLocaleData} from 'react-intl'
import it from 'react-intl/locale-data/it'
import en from 'react-intl/locale-data/en'
import IntlProvider from 'shared/containers/IntlProvider'
import configureStore from 'shared/configureStore'
import routes from 'shared/routes'
import {isDev, isLive} from 'shared/config'
[en, it].forEach(addLocaleData)
const hook = document.getElementById('app')
const initialState = JSON.parse(hook.getAttribute('data-initial-state'))
const store = configureStore(initialState)
const history = syncHistoryWithStore(browserHistory, store)
let content = (
<Provider store={store}>
<IntlProvider key="intl">
<Router history={history}>
{routes}
</Router>
</IntlProvider>
</Provider>
)
if (isLive) {
content = <AppContainer>{content}</AppContainer>
}
function renderApp() {
render(content, hook)
}
if (isLive) {
module.hot.accept('./index.js')
module.hot.accept('../shared/routes', renderApp)
}
renderApp()
On component changes, the reload seems to work, but no render is applied..
maybe it happens before the hot reload trick happens?
NOTE my routes configuration is classic non dymanic routes for now.
I had the same problem because I just forgot to add code for modules replacing
if (module.hot) {
module.hot.accept(
"./App",
() => {
const NextApp = require("./App").App; // THIS LINE
render(NextApp);
},
);
}