根据索引反应redux更新数组

Question

我正在使用 react 学习 redux。我正在尝试根据单击按钮更新一组数字。我特别想根据导入的 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