React.js - 状態オブジェクトの値を増やす

Question

私はユーザのリストを含む状態 'users'を持っています。最初の "count"の値は1です：あなたは/ userdetail /：user_twitter_nameにリダイレクトされた特定のユーザをクリックした後、ユーザのリストを持っています。あなたは1から2

/* actions/counter.js */ 
 

 
    export function userVoted(user) { 
 
     return { 
 
     type: 'USER_VOTED', 
 
     payload: user.count 
 
     }; 
 
    } 
 

 
     
 
    /* reducers/reducer_user_vote.js */ 
 
     
 
    export default function(state = null, action) { 
 
     switch(action.type) { 
 
     case 'USER_VOTED': 
 
      return (action.payload + 1); 
 
     } 
 
     return state; 
 
    } 
 

 

 
    /* reducers/index.js */ 
 
     
 
    import { combineReducers } from 'redux'; 
 
    import UserReducer from './reducer_user'; 
 
    import ActiveUser from './reducer_active_user'; 
 
    import userVoted from './reducer_user_vote'; 
 

 
    const rootReducer = combineReducers({ 
 
     users: UserReducer, 
 
     activeUser: ActiveUser, 
 
     userVoted: userVoted 
 
    }); 
 

 

 
    /* reducers/reducer_user.js */ 
 

 
    export default function() { 
 
     return [ 
 
     {username: 'John Doe', email: 'john@doe.com', twitter: 'johndoe1', count: 1}, 
 
     {username: 'Paul Smith', email: 'smith.paul@csswizardry.com', twitter: 'csswizardry', count: 1}, 
 
     {username: 'Petra Tweets', email: 'petra@tweets.me.com', twitter: 'petra', count: 1}, 
 
     {username: 'Mark Chills', email: 'chillmark@company.com', twitter: 'chillymark12', count: 1}, 
 
     {username: 'John McIntyre', email: 'comic@mcintyre.com', twitter: 'jokesforfun', count: 1}, 
 
     ]; 
 
    } 
 
     
 

 
    export default rootReducer; 
 

 

 
    /* components/seconddetail.js */ 
 

 

 
    import React, { Component } from 'react'; 
 
    import { connect } from 'react-redux'; 
 
    import { Router, Link } from 'react-router'; 
 
    import { userVoted } from '../actions/counter'; 
 
    import { bindActionCreators } from 'redux'; 
 

 

 

 
    class SecondDetail extends Component { 
 

 

 
     render() { 
 

 
     if (!this.props.params.twitter) { 
 
      return <div>Select a user to view details.</div>; 
 
     } 
 

 
     // Filtered User that matches the URL param 
 
     const filteredUser = this.props.users.filter((user) => { 
 
      if (user.twitter == this.props.params.twitter) { 
 
      return user; 
 
      } 
 
     }); 
 

 
     const resultUser = filteredUser[0]; 
 

 
     return (
 
      <div className="detail"> 
 
      <h2 className="text-center">Details:</h2> 
 
      <br /> 
 
      <div className="row"> 
 
       <div className="col-xs-12 col-md-3 text-center"> 
 
       <i className="fa fa-user fa-4x"></i> 
 
       <br/> 
 
       {resultUser.username} 
 
       </div> 
 
       <div className="col-xs-12 col-md-3 text-center"> 
 
       <i className="fa fa-envelope-o fa-4x"></i> 
 
       <br/> 
 
       {resultUser.email} 
 
       </div> 
 
       <div className="col-xs-12 col-md-3 text-center"> 
 
       <i className="fa fa-twitter fa-4x"></i> 
 
       <br/> 
 
       {resultUser.twitter} 
 
       </div> 
 
       <div className="col-xs-12 col-md-3 text-center"> 
 
       <i className="fa fa-star fa-4x"></i> 
 
       <br/> 
 
       {resultUser.count} 
 
       </div> 
 
      </div> 
 
      <br /> 
 
      <br /> 
 
      <div className="row"> 
 
       <div className="col-xs-12 text-center"> 
 
        <div className="btn btn-success" onClick={() => this.props.userVoted(resultUser)}>Vote for user</div> 
 
        <br /> 
 
        <br /> 
 
        <Link to={'/'} className="btn btn-primary">Home</Link> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     ); 
 
     } 
 
    } 
 

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

 
    function mapDispatchToProps(dispatch) { 
 
     return bindActionCreators({ userVoted }, dispatch); 
 
    } 
 

 
    export default connect(mapStateToProps, mapDispatchToProps)(SecondDetail); 
 

 
    /* index.js */ 
 

 
    
 
    import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import { Provider } from 'react-redux'; 
 
import { createStore, applyMiddleware } from 'redux'; 
 
import { Router, Route, Link, browserHistory } from 'react-router'; 
 

 
import App from './components/app'; 
 
import DetailComponent from './components/detailcomponent'; 
 
import SecondDetail from './components/seconddetail'; 
 
import reducers from './reducers'; 
 

 
const createStoreWithMiddleware = applyMiddleware()(createStore); 
 

 
ReactDOM.render(
 
    <Provider store={createStoreWithMiddleware(reducers)}> 
 
     <Router history={browserHistory}> 
 
     <Route path="/" component={App} /> 
 
     <Route path="/detail" component={DetailComponent} /> 
 
     <Route path="/userdetail/:twitter" component={SecondDetail} /> 
 
     </Router> 
 
    </Provider> 
 
    , document.querySelector('.container'));

に最初の実行では、user.count値+ = 1をインクリメントするユーザーボタンに投票をクリックすることができますどこただし、アイテムに機能をクリックしてください（関数内でconsole.log（）を呼び出すとコンソールに値が表示されますが）、特定のユーザーの値は増加しません。助言してもらえますか？おかげでたくさんの

Answer 1

は、私はすべてのコードを見ることができないが、それはあなたの状態の形状があるように見える：あなたはresultUser.countとして、カウントをレンダリングしているあなたのレンダリング機能で

{ 
    users: UserReducer, 
    activeUser: ActiveUser, 
    userVoted: userVoted 
} 

が、私はこれがどんな減速器でも更新されているのを見ることができません。 （私はちょうどそのユーザーがユーザーの投票番号の状態（整数？）の部分を更新することで投票者に投票したのを見ることができます。 userVotedが整数の場合、それはどのユーザーに適用されるのですか？

mapStateToPropsを修正して、各ユーザーのカウントを更新したり、実際にあなたの状態の形状を修正しなければならない場合があります。

編集以下のコメントにさらに

。 userReducerで直接ユーザー数を更新する場合は、以下のロジックを使用できます（これは、 'USER_VOTED'アクションの減速器のswitch文を入れる必要があります）。以下のコードは、ユーザーの配列を修正する方法を示しています：

var state = [ 
     {username: 'John Doe', email: 'john@doe.com', twitter: 'johndoe1', count: 1}, 
     {username: 'Paul Smith', email: 'smith.paul@csswizardry.com', twitter: 'csswizardry', count: 1}, 
     {username: 'Petra Tweets', email: 'petra@tweets.me.com', twitter: 'petra', count: 1}, 
     {username: 'Mark Chills', email: 'chillmark@company.com', twitter: 'chillymark12', count: 1}, 
     {username: 'John McIntyre', email: 'comic@mcintyre.com', twitter: 'jokesforfun', count: 1}, 
     ]; 


var action = { 
    type: 'USER_VOTED', 
    user: {username: 'Mark Chills', email: 'chillmark@company.com', twitter: 'chillymark12', count: 1} 
}; 

var newState = state.map(u => { 
    return action.user.username === u.username ? Object.assign({}, u, { count: u.count + 1}) : u; 
}); 



console.log(newState); 

NB私は、これはユニークでなければならないという意味、ユーザ名に一致させるために持っていた、IDが良いだろう。