2017-08-19 32 views
0

に加入されていないリアクトコンポーネントの更新を強制していません。なぜそれを購読していないのですか?は次のように)コンポーネントが、私はコンポーネントを作成して(接続し使用して接続Reduxのストア

EDIT:

私はアクションの作成者と減速を通じて状態を変更しています。あなたがそれを見ることができるように、私はgithubのにすべてを追加しました

class Test extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     login: "", 
     password: "" 
    } 
    } 

    handleLoginInputChange = (e) => { 
    this.setState({login: e.target.value}) 
    } 

    handlePasswordInputChange = (e) => { 
    this.setState({password: e.target.value}) 
    } 

    handleSubmit = (e) => { 
    e.preventDefault() 
    let user = {login:this.state.login, 
password:this.state.password,userId:Math.floor(Math.random()*(100000))}; 
    this.props.userActions.addUser(user); 
    } 

    render() { 
    return (
     <div className="test"> 
     <form> 
      <input type="text" onChange={this.handleLoginInputChange} value= 
{this.state.login} placeholder="login"/> 
      <input type="text" onChange={this.handlePasswordInputChange} 
value={this.state.password} placeholder="pass"/> 
      <button onClick={this.handleSubmit}>send</button> 
     </form> 
     <UsersList users = {this.props.users} /> 
     </div> 
    ) 
    } 

    componentDidMount() { 
    this.props.userActions.getUsers(); 
    } 
} 

function mapStateToProps(state) { 
    return { users: state.users.users } 
} 

function mapDispatchToProps(dispatch) { 
    return { userActions: bindActionCreators(UserActions, dispatch) } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Test) 

export function addUser(user) { 
    return function (dispatch) { 
    axios.post('http://localhost:4200/users/add/user', {user:user}) 
     .then(() => dispatch({ 
     type: USER_ADD, 
     user: user 
     })).catch(err => console.log(err)); 
    } 
} 

export function getUsers() { 
    return function (dispatch) { 
    axios.get('http://localhost:4200/users') 
    .then((response) => dispatch({ 
     type: REQUEST_USERS, 
     users:response.data 
    })).catch(err => console.log(err)); 
    } 
} 

と減速:

export function users(state = initialState, action) { 
    switch (action.type) { 
    case 'USER_ADD': 
     { 
     return { 
     ...state, 
     users: [ 
     ...state.users, 
     action.user 
     ] 
    } 
     break; 
     } 
    case 'REQUEST_USERS': 
     { 
     return { 
      ...state, 
      users: [ 
      action.users 
      ] 
     } 
     break; 
     } 
     ......... 

と、これは私の完全な構成要素であるこれは、それがどのように見えるかですgithub

興味があるのは、reducers/users.js、actions/useractions、コンポーネント/ Test.jsです。

サーバーからデータを取得した後の状態は、次のようになります。enter image description here

私はさまざまなアプローチを試みました。今、私は新しいユーザーを追加した後に状態を変更することを断念しました。その代わりに私はサーバーからデータを得ることができるボタンを作った - それはページを再読み込みしているので、私はその解決策に満足していない。

+0

どのように還元状態を変更しますか?アクションディスパッチとリデューサーを介して?もっとコードを投稿してください。 –

+0

あなたのコンポーネントが接続されています、他のコードを表示してください、 – Andrew

+0

あなたは 'send'をクリックするとどうなりますか? AJAXリクエストが完了したら、アクションがディスパッチされますか?その結果、ストアはどのように変更されていますか? –

答えて

1

これは間違いない?

function mapStateToProps(state) { 
    return { users: state.users.users } 
} 

どのように還元剤を店舗にバインドしていますか?状態は、connectで期待しているものと異なる場合があります。コンポーネントをマウントした後にストアに含まれるものを投稿できますか?

関連する問題