How tell an other component of changement state of redux? - reactjs

Question

I have two components reactjs , I create an state redux to handle this state from two components .
`appcomponent.js
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state=[], action) {
switch (action.type) {
case 'ADD_USER':
return [
{user:action.user}
];
default:
return state;
}
}
class appcomponent extends Component {
constructor(props) {
super(props);
this.state = {Users:[]};
//this.addUser=this.addUser.bind(this);
this.onFormSubmit=this.onFormSubmit.bind(this);
this.get=this.get.bind(this);
}
get(){
console.log(this.props.r);
}
onFormSubmit() {
this.props.send('user');
}
render() {
return (
<div>
<br /><br /><br />
<button onClick={this.onFormSubmit}>redux</button><br /><br /><br /><br />
<button onClick={this.get}>REDUX</button>
</div>
)}
}
// action
export function addUser(user) {
return {
type: 'ADD_USER',
user,
};
}
function mapDispatchToProps (dispatch) {
return {
send: user => dispatch(addUser(user))
};
};
const mapStateToProps = (state, ownProps) => {
return { r:state};
};
export default connect(mapStateToProps,mapDispatchToProps)(appcomponent);
In this component when I click "redux" button then onclick "REDUX" button I get the state changed.
In the other component I have this code :
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div><h1>{this.props.user}</h1></div>
)
}}
const mapStateToProps = (state, ownProps) => {
return { user: state[0].user};//.user
};
function mapDispatchToProps (dispatch) {
return {
get: user => dispatch(addUser('username'))
};
};
export default connect(mapStateToProps,mapDispatchToProps)(App);
In the last component always I get the initial state created in index.js
var store = createStore(get_user,[{user:'hhhh'}]);
ReactDOM.render( <Provider store={store}>
Please who can help me ?

Answer 1

You only need to call createStore() once, preferably near the top of your component tree not in each component.
Assuming you wrap your app in a Provider (from redux) you'll have access to redux's central State via the mapStateToProps function (where you can assign state elements to a particular components props):
import { Provider } from 'react-redux';
import {createStore, combineReducers } from 'redux';
const store = createStore(
combineReducers({
user: usersReducer,
otherThings: otherThingsReducer
})
)
const app = (
<Provider store={store}>
<MainAppComponentOrRouter/>
</Provider>
);
ReactDOM.render(app, document.getElementById("app"));
And then in a component:
const mapStateToProps = (state, props) => {
return {
user: state.user,
otherThings: state.otherThings
};
};
export default connect(mapStateToProps)(MyComponent);

Answer 2

in the first component try use the following code
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state={user:[]}, action) {
switch (action.type) {
case 'ADD_USER':
return {
...state,
user:action.user
}
default:
return state;
}
}
class appcomponent extends Component {
constructor(props) {
super(props);
this.state = {Users:[]};
//this.addUser=this.addUser.bind(this);
this.onFormSubmit=this.onFormSubmit.bind(this);
this.get=this.get.bind(this);
}
get(){
console.log(this.props.r);
}
onFormSubmit() {
this.props.send('user');
}
render() {
return (
<div>
<br /><br /><br />
<button onClick={this.onFormSubmit}>redux</button><br /><br /><br /><br />
<button onClick={this.get}>REDUX</button>
</div>
)}
}
// action
export function addUser(user) {
return {
type: 'ADD_USER',
user,
};
}
function mapDispatchToProps (dispatch) {
return {
send: user => dispatch(addUser(user))
};
};
const mapStateToProps = (state, ownProps) => {
return { r:state};
};
export default connect(mapStateToProps,mapDispatchToProps)(appcomponent);
and on the second component use the following code
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div><h1>{this.props.user}</h1></div>
)
}}
const mapStateToProps = (state, ownProps) => {
return { user: state.user};//.user
};
function mapDispatchToProps (dispatch) {
return {
get: user => dispatch(addUser('username'))
};
};
export default connect(mapStateToProps,mapDispatchToProps)(App);