issue in redux, once create a redux application - javascript

//created action.js,rootReducer called everything in index.js but having issue on same..
//getting issue:-
Error: Could not find "store" in the context of "Connect(Home)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Home) in connect options.
//added rootReducer.js:-
import {combineReducers} from 'redux';
export default combineReducers({
})
//added action.js:-
export const helloRedux= () =>(dispatch:any)=>{
alert("Heloo Redux")
}
//added index.js:-
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider} from 'react-redux';
import { createStore, applyMiddleware} from 'redux';
import ReduxThunk from 'redux-thunk';
import rootReducer from './rootReducer';
const store = createStore(rootReducer, applyMiddleware(ReduxThunk))
const MyAppWithStore = () => (
<Provider store={store}>
<App />
</Provider>
);
ReactDOM.render(<MyAppWithStore />, document.getElementById('root'));
serviceWorker.unregister();
//added home.js:-
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { helloRedux } from '../services/action'
class Home extends Component {
render() {
console.log(this.props)
return (
<div>
<h1>home Component</h1>
<button onClick = {() => this.props.helloRedux()}>Click Me</button>
{/* <button onClick = {() => this.helloRedux()}>Click Me</button> */}
</div>
);
}
}
const MapDispachToProps = dispach =>({
helloRedux:()=> dispach(helloRedux())
})
const mapStateToProps= state=> {
{
}
}
const HomeCom =connect(
mapStateToProps,
MapDispachToProps
)(Home)
export default HomeCom;
//app.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './component/home'
function App() {
return (
<div className="App">
<header className="App-header">
{/* <img src={logo} className="App-logo" alt="logo" /> */}
<Home />
</header>
</div>
);
}
export default App;
//created action.js,rootReducer called everything in index.js but having issue on same..
//getting issue:-
Error: Could not find "store" in the context of "Connect(Home)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Home) in connect options.

Related

Changing the Redux Store caused my App to stop Rendering

I'm learning React/Redux, and while rewriting my redux store to better store the state and add async thunks, my app stopped rendering. My console shows no errors and the page is blank.
App.js
import './App.css'
import React from 'react'
import SearchBar from '../features/search/SearchBar'
import Post from '../components/Post'
import Subreddits from '../components/Subreddits'
import { BsReddit } from 'react-icons/bs'
const App = () => {
let listOfPosts = []
for (let i = 0; i < 5; i++){
listOfPosts.push(<Post iterator={i} />)
}
return (
<main>
<header>
<h1>
<BsReddit />
<span>Reddit</span> Minimal
</h1>
<SearchBar />
</header>
<div className='post-container'>
{listOfPosts.map((post, i) => <li key={'post_' + i}>{post}</li>)}
</div>
<Subreddits />
</main>
);
}
export default App
store.js
import { configureStore } from '#reduxjs/toolkit'
import { postsReducer } from '../features/posts/postsSlice'
import React from 'react'
export const store = configureStore({
reducer: {
posts: postsReducer
}
})
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
import { store } from './app/store'
import { Provider } from 'react-redux'
const render = () => {
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
}
store.subscribe(render)
I can show more of the code, but i assume the problem is somewhere in these 3 files. I truly don't understand why its not rendering.

How to render a react component on landing?

I am new to react app trying to add a component and loading when app opens but it is showing in console Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page what is implemented wrong please help
App.js
import React from 'react';
import './app.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import JOB_DESC from './job_desc';
function App() {
return (
<Router>
<Routes>
<Route exact path='/' component={JOB_DESC} />
</Routes>
</Router>
)
}
export default App;
job_desc.js
import React, { Component } from 'react';
import './app.css';
import ReactImage from './react.png';
export default class JOB_DESC extends Component {
state = { data: null };
componentDidMount() {
fetch('/api/getUsername')
.then(res => res.json())
.then(res => this.setState({ data : res.data}));
}
render() {
const { data } = this.state;
console.log("DATA", data);
return (
<div>
<h1>Test</h1>
{username ? <h1>{`Hello ${username}`}</h1> : <h1>Loading.. please wait!</h1>}
<img src={ReactImage} alt="react" />
</div>
);
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Try adding <JOB_DESC /> as component in the Route

How to render react class component with React HashRouter and Apollo client?

I am working at a project in which I must use only React class components and I am fetching data from an Apollo server.
The problem is that in Chrome is rendering only the Navbar.jsx. When I am navigating on one of the links nothing is on the screen. Also there is not any error in the console.
Could somebody help me?
Thanks!
This is Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
} from "#apollo/client";
import { HashRouter } from 'react-router-dom';
export const client = new ApolloClient({
uri: ' http://localhost:4000/',
cache: new InMemoryCache()
});
ReactDOM.render(
<React.StrictMode>
<HashRouter >
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Here is App.js :
import React, { Component } from 'react'
import './App.css';
import { Switch, Route} from 'react-router-dom'
import Navbar from './Components/Navbar';
import Bikes from './Pages/Bikes';
import Books from './Pages/Books';
import { client } from './index';
import {GET_QUERY} from './GraphQl/Queries'
class App extends Component {
state={
currencies: [],
}
componentDidMount = async ()=>{
const response = await client.query({
query:GET_QUERY
})
this.setState({
currencies:response.data.currencies
})
}
render() {
return (
<div className="App">
<Navbar currencies={this.state.currencies}/>
<Switch>
<Route exact path="/bikes" component={Bikes} />
<Route exact path="/books" component={Books} />;
</Switch>
</div>
);
}
}
export default App;
Here is Navbar.jsx :
import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import styled from 'styled-components'
import { withRouter } from 'react-router';
const StyledLink = styled(Link)`
`;
class Navbar extends Component {
render() {
return (
<nav>
<div>
<ul>
<li>
<StyledLink to="/bikes" replace>Bikes</StyledLink>
</li>
<li>
<StyledLink to="/books" replace>Books</StyledLink>
</li>
</ul>
</div>
</nav>
)
}
}
export default withRouter(Navbar)
and one of the pages, Bikes.jsx:
import React, { Component } from 'react'
import { client } from '../index'
import { GET_QUERY } from '../GraphQl/Queries'
import { CATEGORY_VAR } from '../GraphQl/Variables'
class Bikes extends Component {
state={
bikesArt: []
}
componentDidMount = async ()=>{
const response = await client.query({
query: GET_QUERY,
variables: CATEGORY_VAR
})
this.setState({
bikesArt:response.data.category.products
})
}
render() {
return (
<div>
<h1>Bikes</h1>
</div>
)
}
}
export default Bikes
Solved it. It was the CSS. The navbar was covering the only <h2> tag from the page

React-Router v4.2.2 not working (I think I've done something wrong in the Route tag?)

I'm using react-router v4.2.2 in my project, and am trying to create a set of cards that each link to other components. Right now I'm just testing that the router works, by routing each Card to one specific component called 'Project1'. This, however, is not working; I'm not seeing the div inside the Project1 component pop up. What am I doing wrong?? Shouldn't each Card link to the Project1 component?
Here is the code for the main container that holds the cards:
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import ProjectCard from '../components/project_card.js';
import Project1 from '../components/project1.js';
class ProjectCards extends React.Component {
render() {
var projectCards = this.props.projects.map((project, i) => {
return (
<div key={i}>
<Link to={`/${project.title}`}>
<ProjectCard title={project.title} date={project.date} focus={project.focus}/>
</Link>
</div>
);
});
return (
<div>{projectCards}</div>
);
}
}
function mapStateToProps(state) {
return {
projects: state.projects
};
}
export default connect(mapStateToProps)(ProjectCards);
Here is the code for the Routes container:
import React from 'react';
import Project1 from '../components/project1.js';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
class Routes extends React.Component{
render() {
var createRoutes = this.props.projects.map((project, i) => {
return <Route key={i} exact path={`/${project.title}`} component={Project1}/>
});
return (
<Switch>
{createRoutes}
</Switch>
);
}
}
function mapStateToProps(state) {
return {
projects: state.projects
};
}
export default connect(mapStateToProps)(Routes);
Here is the code for the index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import ReduxPromise from 'redux-promise';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.jsx';
import css from '../style/style.css';
import style from '../style/style.css';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));
and the code for Project1, which should display when a Card has been clicked:
import React from 'react';
const Project1 = () => {
return (
<div>hello there this is Project1</div>
);
}
export default Project1;
When you click on a link, you navigate to Project1, which has no Routes defined. You basically destroy your Route when you lick on it because the Switch is in the same component as the Link. The Switch statement needs to be moved to a 3rd component so that it still exists after clicking on a linking card.

React view is not rendering when using react router 4 and redux

I want to create simple example using React, React router 4, Redux.
But I'm stuck on rendering process.
Router User is rendering as normal but my Home view not.
Also I have no errors so I don't know were problem is.
Any help I would be very thankful.
Files:
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router,Route,Link } from 'react-router-dom';
import { createStore,applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/rootReducer";
import { Provider } from"react-redux"
import { composeWithDevTools } from "redux-devtools-extension";
import { Home } from "./components/home/Home";
import { User } from "./components/user/User";
const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(thunk)
)
);
class App extends React.Component{
render(){
return(
<Provider store={store}>
<Router>
<div>
<Link to="/">Home</Link>
<Link to="/user">User</Link>
<Route exact path="/" component={Home}/>
<Route exact path="/user" component={User}/>
</div>
</Router>
</Provider>
);
}
}
render(<App/>,window.document.getElementById("app"));
rootReducer.js
import { combineReducers } from "redux";
import userReducer from "./userReducer";
export default combineReducers({
user:userReducer
});
userReducer.js
export default function User(state=[{name:'TMP'}],action={}){
switch (action.type){
default: return state
}
}
Home.js
import React from "react";
import {connect} from"react-redux"
import { withRouter } from 'react-router-dom'
class Home extends React.Component{
render(){
return(
<div>
TADAAAAA HOME
{user}
</div>
);
}
}
function mapStateToProps(state) {
return{
user:state.user
}
}
export default withRouter(connect(mapStateToProps)(Home))
user.js
import React from "react";
export class User extends React.Component{
render(){
return(
<div>
USER
</div>
);
}
}
import { Home } from "./components/home/Home";
should be:
import Home from "./components/home/Home";
Here you can learn about the differences of importing/exporting as default or not

Categories