У меня есть два компонента <App/>
и <PitPage/>
, оба они похожи и используют другой компонент <PitComponents/>
.Оба эти компонента используются в <Provider/>
, предоставленном React, и используют тот же магазин, который я создал.Обратите внимание, что при отправке событий (внутри файла vanillaRedux.js
) эта строка <PitComponents uName="Badari Krishna" user={this.props.create.users[0].name}/>
в App.js
дает вывод правильного ответа "BK", но я ожидаю, что подобное должно произойти в PitPage.js
, где она показывает, что users
будетне определено.Пожалуйста, дайте мне знать, где я иду не так.скриншоты или результаты также прилагаются.
index.html (ниже)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<!-- binds App.js code here -->
<div id="root"></div>
<!-- binds PitPage code here -->
<div id="pit"></div>
</body>
</html>
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 globalStore from './components/pit/vanillaRedux';
ReactDOM.render(<Provider store={globalStore}><App /> </Provider>, document.getElementById('root'));
serviceWorker.unregister();
App.js (внизу)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import vanillaRedux from './components/pit/vanillaRedux';
import PitComponents from './components/pit/PitComponents';
import {connect} from 'react-redux';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} class="App-logo" alt="logo" />
<p>
Edit <h1>src/App.js</h1> and save to reload.
</p>
<a
class="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<PitComponents uName="UserName" user={this.props.create.users[0].name}/>
</div>
);
}
}
const mapStateToProps= (state) =>{
return {
create: state.userCreateReducer
}
};
const mapDispatchToProps= (dispatch) => {
return {
setName: () => {
dispatch({
type: "DELETE",
id:3
});
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(App);
PitPage.js (внизу)
import React from 'react';
import ReactDOM from 'react-dom';
import PitComponents from './PitComponents';
import {connect} from 'react-redux';
import {Provider} from 'react-redux';
import globalStore from './vanillaRedux';
class PitPage extends React.Component{
render(){
return(
<PitComponents uName="user" user={this.props.create.users[0].name}/> <!--this is where error is thrown saying "user" undefined -->
);
}
}
const mapStateToProps= (state) =>{
return {
create: state.userCreateReducer
}
};
const mapDispatchToProps= (dispatch) => {
return {
setName: () => {
dispatch({
type: "DELETE",
id:3
});
}
}
}
ReactDOM.render(<Provider store={globalStore}><PitPage /></Provider> , document.getElementById('pit'));
export default connect(mapStateToProps,mapDispatchToProps) (PitPage);
vanillaRedux.js (ниже)
import {createStore, applyMiddleware} from 'redux';
import { combineReducers } from 'redux';
import logger from 'redux-logger';
const usersInitialState = {
exmple: 'Example',
users: []
};
const userCreateReducer = (state = usersInitialState,action) =>{
switch(action.type){
case "CREATE":
console.log("CREATE called..!!");
state = {
...state,
users: [...state.users,action.user]
};
break;
}
return state;
};
const globalStore = createStore(userCreateReducer,applyMiddleware(logger) );
globalStore.subscribe(() => {
console.log('globalStore updated -->',globalStore.getState());
});
globalStore.dispatch({
type: "CREATE",
user: {
id: 1,
name: 'BK',
age: 23,
}
});
PitComponents.js (ниже)
import React from 'react';
class PitComponents extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<h1> Welcome {this.props.name} </h1>
<p> This is PIT 1 </p>
<p> From Redux --> {this.props.user} </p>
</div>
);
}
}
export default PitComponents;