react redux updating array based on index

Question

I am learning redux using react. I am trying to update an array of numbers based on a button click. I am specifically want to update the counter at specific index based on imported json file.

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { upVote, downVote } from '../store/actions/voteAction';

class Voter extends Component {
    render() {
        const { count, upVote, downVote, id} = this.props
        return (
            <div>
                <button onClick={() => upVote(id)}>+</button>
                The count is {count[id]}
                <button onClick={() => downVote(id)}>-</button>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => ({
    upVote: (payload) => dispatch(upVote(payload)),
    downVote: (payload) => dispatch(downVote(payload))
  });

const mapStateToProps = (state) => ({
    count: state.vote.count

})
export default connect(mapStateToProps, mapDispatchToProps)(Voter);

I think my issue comes with how i pass and update the payload in my reducer.

import {UP_VOTE,DOWN_VOTE} from '../actions/actionTypes'
import Mice from './../../imports/mice'
const initialState = {
    count: new Array(Mice.length).fill(0)
}


const voteReducer = (state=initialState, action) => {
    const id = action.payload
    switch(action.type){
        case UP_VOTE:
            return{
            ...state, count: state.count[id] + 1
            }
        case DOWN_VOTE:
            return{
            ...state, count: state.count[id] - 1
            }
        default:
            return state
    }

}

export default voteReducer;

I update the array, but every index is still changing and it appears i am still mutating the count array instead of an index inside it.

I have uploaded all my code to CodeSandbox for viewing and experimenting: CodeSandbox Link

Thanks for reading

i'm running your code, as I can see that you are not passing the proper id to upvote function from voter component. every time it's logging either 0 or 1 for id — tajammul1996
– tajammul1996, Commented Mar 10, 2019 at 2:36
I console.log(id) below const { count, upVote, downVote, id} = this.props in the voter component and i'm getting all 100+ indexes in my console. Can you be more specific? How are you getting the 1 or 0? thanks — naethan
– naethan, Commented Mar 10, 2019 at 2:58

Alexander Kireyev · Accepted Answer · 2019-03-10 03:06:48Z

1

Use map method to create a new array, add change one element. The Redux switch will be:

switch (action.type) {
  case UP_VOTE:
    return {
      ...state,
      count: state.count.map((vote, i) => (i === id ? vote + 1 : vote))
    };
  case DOWN_VOTE:
    return {
      ...state,
      count: state.count.map((vote, i) => (i === id ? vote - 1 : vote))
    };
  default:
    return state;
}

Working code here https://codesandbox.io/s/74pmomo42j

edited Mar 10, 2019 at 3:06

answered Mar 10, 2019 at 2:58

Alexander Kireyev

10.8k13 gold badges68 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

naethan Over a year ago

thank you man. I didn't even think of using the map function even though I used it in another component.

Alexander Kireyev Over a year ago

This is a typical way when you need to create a new state from an old one. And you can use the same to map objects.

Collectives™ on Stack Overflow

react redux updating array based on index

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related