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';
Related
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)
store.js
import { createStore, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { bookReducers } from './reducers/bookReducers'
const reducer = combineReducers({
book: bookReducers,
})
const middleware = [thunk]
const initialState = {
books: [],
isLoading: false,
eror: '',
}
const store = createStore(
reducer,
initialState,
composeWithDevTools(...middleware)
)
export default store
error I got in my console
I got this error from provider component while adding prop store but its the same as in redux docs . what is happening here
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.
Newbie here in the world of reactjs. I tried using redux and redux thunk along with reducers, though I don't full understand if they are all in one package. I'm creating a login in that will using those items. But I kept on seeing store.getstate is not a function.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux';
const store = require('./store/index');
ReactDOM.render(
//<React.StrictMode>
<Provider store="{store()}">
<App />
</Provider>,
//</React.StrictMode>,
document.getElementById('root')
);
store/index.js
import {createStore} from 'redux'
import AllReducers from './reducers/AllReducers';
// import
const initialStates = {
auth: {
loggedIn: false,
user:{}
}
}
const store = createStore(AllReducers,initialStates);
export default store;
store/reducers/AllReducers.js
import { combineReducers } from "redux";
import AuthReducer from "./AuthReducer";
const AllReducers = combineReducers({auth: AuthReducer})
export default AllReducers;
store/reducers/AuthReducers.js
const AuthReducer = (state = {}, actions) => {
switch (actions.type) {
case 'value':
return state;
default:
return state;
}
}
export default AuthReducer;
I kept on getting the TypeError: store.getState is not a function
Can someone help me at least an advice on how to trap this error then i will do the rest for my studying.
Thanks.
I think you did mistake here.
<Provider store="{store()}">
You should write
<Provider store={store}>
I hope this answer will help you!!
The problem in <Provider store="{store()}">. You need to update like this:
<Provider store={store}>
I recieve this error message when I run my react app:
Could not find "store" in the context of "Connect(Booklist)". Either
wrap the root component in a , or pass a custom React
context provider to and the corresponding React context
consumer to Connect(Booklist) in connect options.
I'm using Create React App and trying to create an app that lists some details.
See code below:
app.js
import React, { Component } from 'react';
import './App.css';
import Booklist from './container/book-list';
class App extends Component {
render() {
return (
<div className="App">
<Booklist />
</div>
);
}
}
export default App;
book-list.js
import React, {Component} from 'react';
import { connect } from 'react-redux';
class Booklist extends Component{
renderList(){
return this.props.books.map((book) =>{
return(
<li key={book.title}>{book.title}</li>
);
}
);
}
render(){
return this.props.books.map((book) =>{
return(
<ul>{this.renderList()}</ul>
);
}
);
}
}
function mapStateToProps(state){
return {
books: state.books
}
}
export default connect (mapStateToProps)(Booklist);
books_reducer.js
export default function(){
return[
{title: booke1},
{title: booke2},
{title: booke3},
{title: booke3}
]
}
index.js in reducer
import {combineReducers} from redux;
import booksReducer from './books_reducer'
const rootReducer = combineReducers({
books: booksReducer
});
export default booksReducer;
Are you wrapping your app in your store?
import { Provider } from 'react-redux';
const store = createStore(
combineReducers({
books: booksReducer
});
)
<Provider store={store}>
<App />
</Provider>
When we use Redux we have to createStore for store all reducers of our app.we combine all Reducers in single component like .
import {combineReducers} from 'redux';
import BooksReducer from './Books';
import ActiveBookReducer from './activeReducer';
const RootReducer = combineReducers({
books : BooksReducer,
activeBookreducer : ActiveBookReducer
})
export default RootReducer;
In Above Example I create Two Reducers BookReducer and ActiveBookReducer and I stored both in single Reducer called RootReducer using combineReducer.
First import provider and createStore libraries in your index.js file.
import your RootReducer in your index.js file.
Then take one variable called store and stored RootReducer using createStore library .const store = createStore(RootReducer);
Then add provider in index.js: <Provider store = {store}>
<App />
</Provider>,
Your code should look like this :
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import App from './Components/App';
import RootReducer from './Reducers';
const store = createStore(RootReducer);
ReactDOM.render(
<Provider store = {store}>
<App />
</Provider>,
document.getElementById('root')
);
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')
)