Redux: making sharing component trigger unique redux path depends on parent component - reactjs

Question

Here is my scenario: I have a feed with list of questions. In each question, I have a upvote button for upvoting this question.
So I will design an upvote button component sharing between other question components. When clicking to this button, button will trigger an event to server. method signature sometime such as:
func upvote(questionOwnerId, upvoteUserId) { ... }
After upvoting, upvote will dispatch an event for redux handle and update state respectively. So upvote button will always display latest state. (how many upvoted users for that question).
This is my problem: I don't know how to make sharing component (upvote component), after calling method to server then trigger unique redux path on redux tree.
I have a solution for this: Upvote component will receive following parameters:
total number of upvote.
question's user id.
redux path.
Then upvote function and Reducer will use redux path for update state on redux tree respectively. Does this method works well and look clean for project ? Or is there any "true" way for my problem?
#Edit: Redux path for example: feeds.item.questionList.question[0] for question component at 0 index. feeds.item.questionList.question[1] for question component at 1 index ... so Reducer can understand how to update redux tree.

Answer 1

Such shared component can be done by just receiving the proper props and passing a generic onClick events.
For example, let say we create component named <Question /> and it will the props:
votes - to display current number of votes.
onUpvote - as a click event for the up-vote button.
onDownvote - as a click event for the down-vote button.
id - it needs the id in order to pass it to the parent's
function.
question - The value of the question to display.
Now, your parent component will take a list of questions from the redux-store and will .map on it and will return for each question a <Question /> component with the respective props (id, votes and question).
As for the onUpVote and onDownVote you will pass functions that created in the parent. These functions will dispatch actions and that will handled by your reducer which will return the new state, this will trigger a re-render with new data to show.
I've created a simple example, note that i can't use redux here so i managed the state inside the App component, but i mentioned in comments where you can dispatch actions and what logic should go inside the reducers.
const questionsList = [
{
id: 1,
votes: 2,
question: "whats up"
},
{
id: 2,
votes: -1,
question: "whats the time"
},
{
id: 3,
votes: 0,
question: "where are you"
},
{
id: 4,
votes: 7,
question: "who are you"
}
];
class Question extends React.Component {
constructor(props) {
super(props);
this.onUpvote = this.onUpvote.bind(this);
this.onDownvote = this.onDownvote.bind(this);
}
onUpvote() {
const { id, onUpvote } = this.props;
onUpvote(id);
}
onDownvote() {
const { id, onDownvote } = this.props;
onDownvote(id);
}
render() {
const { votes, question } = this.props;
const voteClassName = `votes ${votes < 0 ? 'low' : 'high'}`;
return (
<div className="question-wrapper">
<div className="buttons-wrapper">
<button className="button" onClick={this.onUpvote}>+</button>
<div className={voteClassName}>{votes}</div>
<button className="button" onClick={this.onDownvote}>-</button>
</div>
<div className="question">{question}</div>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
questions: questionsList
};
this.onUpvote = this.onUpvote.bind(this);
this.onDownvote = this.onDownvote.bind(this);
}
onUpvote(id) {
const { questions } = this.state;
// you can dispatch an action here
// and instead of doing this logic in here you can do it in your reducer
const nextState = questions.map(question => {
if (question.id != id) {
return question;
}
return {
...question,
votes: question.votes + 1
};
});
this.setState({ questions: nextState });
}
onDownvote(id) {
const { questions } = this.state;
// you can dispatch an action here
// and instead of doing this logic in here you can do it in your reducer
const nextState = questions.map(question => {
if (question.id != id) {
return question;
}
return {
...question,
votes: question.votes - 1
};
});
this.setState({ questions: nextState });
}
render() {
const { questions } = this.state; // get the questions via props (redux store)
return (
<div>
{questions.map(q => (
<Question
id={q.id}
question={q.question}
votes={q.votes}
onUpvote={this.onUpvote}
onDownvote={this.onDownvote}
/>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
.question-wrapper{
display: flex;
flex-direction: row;
width: 150px;
box-shadow: 0 0 2px 1px #333;
margin: 10px 0;
padding: 5px 20px;
}
.buttons-wrapper{
display:flex;
flex-direction: column;
}
.button{
margin: 10px 0;
cursor: pointer;
}
.question{
align-self: center;
margin: 0 20px;
font-size: 22px;
}
.high{
color: #3cba54;
}
.low{
color: #db3236;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>