React.js - 遞增狀態對象值

Question

我有一個包含用戶列表的狀態「用戶」。我想在點擊時增加一個用戶值「計數」，初始「計數」值爲1.行爲應該是：您有一個用戶列表，點擊特定用戶後，您將被重定向到/ userdetail /：user_twitter_name在這裏可以點擊用戶按鈕投票將遞增user.count值+ = 1，在從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'));

然而，關於項目單擊功能被調用（我可以在console中看到console.log（）函數內的值），但特定用戶的值不會增加。你能建議嗎？非常感謝

Answer 1

我無法看到所有的代碼，但它看起來像你的狀態形狀：

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

在你渲染功能正進行渲染算作resultUser.count但我看不到任何減速器中的這個更新。 （我可以看到用戶投票減速器更新userVoted部分狀態（一個整數？））。如果userVoted是一個整數，你如何知道它應用於哪個用戶？

因此，您可能需要修改您的mapStateToProps，以便您可以更新每個用戶的計數，或者實際修改您的狀態形狀。

編輯

繼下面的評論;如果你想直接在userReducer中更新用戶數，你可以使用下面的邏輯（它需要放入Reducer的'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會更好。