reduxのチェンジメント状態の他のコンポーネントをどのように伝えますか？

Question

私は2つのコンポーネントreactjを持っています。私は2つのコンポーネントからこの状態を処理するためにstate reduxを作成します。

このコンポーネントでは、「還元」ボタンをクリックしてから「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（）は、各コンポーネントにないコンポーネントツリーの一番上に1回だけ呼び出すことが必要です。

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

：

あなたはmapStateToProps機能を経由して再来の中心国家へのアクセス（あなたが特定の状態要素を割り当てることができますコンポーネントの小道具を）持っています（Reduxのから）プロバイダでアプリケーションをラップと仮定すると、そして、コンポーネントに：最初のコンポーネントで

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