如何使用redux将选中项存储在reactjs中的数组中

npm install redux react-redux

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

const initialState = {
  selectedItems: []
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        selectedItems: [...state.selectedItems, action.payload]
      };
    case 'REMOVE_ITEM':
      return {
        ...state,
        selectedItems: state.selectedItems.filter(item => item !== action.payload)
      };
    default:
      return state;
  }
}

export default rootReducer;

export const addItem = (item) => ({
  type: 'ADD_ITEM',
  payload: item
});

export const removeItem = (item) => ({
  type: 'REMOVE_ITEM',
  payload: item
});

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addItem, removeItem } from './actions';

function ItemList({ items }) {
  const selectedItems = useSelector(state => state.selectedItems);
  const dispatch = useDispatch();

  const handleSelect = (item) => {
    dispatch(addItem(item));
  };

  const handleDeselect = (item) => {
    dispatch(removeItem(item));
  };

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          <span>{item.name}</span>
          {!selectedItems.includes(item) ? (
            <button onClick={() => handleSelect(item)}>Select</button>
          ) : (
            <button onClick={() => handleDeselect(item)}>Deselect</button>
          )}
        </div>
      ))}
    </div>
  );
}

export default ItemList;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

const selectedItems = useSelector(state => state.selectedItems, shallowEqual);