如何告诉终极版changement状态的其他组成部分？(How tell an other comp

我有两个组件reactjs，我创建一个状态终极版从两个组件处理此状态。

  `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);

在这部分，当我点击“终极版”按钮，然后onclick“事件REDUX”按钮，我得到的状态改变。 在其他组件我有这样的代码：

 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);

在最后一个组件总是我得到index.js创建初始状态

var store = createStore(get_user,[{user:'hhhh'}]);
ReactDOM.render( <Provider store={store}>

请谁可以帮我？

Answer 1:

你只需要在每个组件不调用createStore（）一次，最好是靠近你的组件树的顶端。

假设你换你的应用程序中包含Provider（从终极版），你必须通过mapStateToProps功能（您可分配状态元素的特定组件道具）获得终极版的中央国家：

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"));

然后在一个组件：

const mapStateToProps = (state, props) => {
  return {
    user: state.user,
    otherThings: state.otherThings
  };
};

export default connect(mapStateToProps)(MyComponent);

Answer 2:

在第一部分尝试使用下面的代码

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);

和第二部件上使用下面的代码

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);

文章来源: How tell an other component of changement state of redux?