React-Redux状态管理:存储“选定”列表项的正确方式？

// 定义Redux的action类型
const SELECT_ITEM = 'SELECT_ITEM';

// 定义Redux的action创建函数
const selectItem = (itemId) => {
  return {
    type: SELECT_ITEM,
    payload: itemId
  };
};

// 定义Redux的reducer函数
const initialState = {
  selectedItems: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SELECT_ITEM:
      return {
        ...state,
        selectedItems: [...state.selectedItems, action.payload]
      };
    default:
      return state;
  }
};

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

// 在React组件中使用存储的“选定”列表项
import React from 'react';
import { connect } from 'react-redux';

const ItemList = ({ items, selectedItems, selectItem }) => {
  const handleItemClick = (itemId) => {
    selectItem(itemId);
  };

  return (
    <ul>
      {items.map((item) => (
        <li
          key={item.id}
          onClick={() => handleItemClick(item.id)}
          className={selectedItems.includes(item.id) ? 'selected' : ''}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
};

const mapStateToProps = (state) => {
  return {
    selectedItems: state.selectedItems
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    selectItem: (itemId) => dispatch(selectItem(itemId))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ItemList);