реагировать на редукционный массив обновлений на основе индекса

Question

Я учусь на редуксе, используя реаги. Я пытаюсь обновить массив чисел на основе нажатия кнопки. Я специально хочу обновить счетчик по определенному индексу на основе импортированного файла JSON.

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);

Я думаю, что моя проблема связана с тем, как я передаю и обновляю полезную нагрузку в моем редукторе.

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;

Я обновляю массив, но каждый индекс все еще меняется, и кажется, что я все еще изменяю массив count вместо индекса внутри него.

Я загрузил весь свой код в CodeSandbox для просмотра и экспериментов: CodeSandbox Link

Спасибо за чтение

Answer 1

Используйте метод map для создания нового массива, добавьте изменение одного элемента. Переключатель Redux будет:

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;
}

Рабочий код здесь https://codesandbox.io/s/74pmomo42j