React-redux:更新数组中的值

// 定义reducer函数
const initialState = {
  array: [1, 2, 3, 4, 5]
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_ARRAY':
      return {
        ...state,
        array: state.array.map((value, index) => {
          if (index === action.index) {
            return action.newValue;
          }
          return value;
        })
      };
    default:
      return state;
  }
};

// 创建store
const store = createStore(reducer);

// 定义action
const updateArray = (index, newValue) => {
  return {
    type: 'UPDATE_ARRAY',
    index,
    newValue
  };
};

// 连接组件到Redux的store
const mapStateToProps = state => {
  return {
    array: state.array
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onUpdateArray: (index, newValue) => dispatch(updateArray(index, newValue))
  };
};

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(YourComponent);

// 在组件中使用props更新数组中的值
const YourComponent = ({ array, onUpdateArray }) => {
  const handleClick = () => {
    onUpdateArray(2, 10); // 更新数组中索引为2的值为10
  };

  return (
    <div>
      <button onClick={handleClick}>更新数组</button>
      <ul>
        {array.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </div>
  );
};