我是redux和react的新手，我正在尝试更新REDUX存储中的嵌套状态，但无法对其进行排序

// actions.js
export const SORT_ITEMS = 'SORT_ITEMS';

export const sortItems = () => ({
  type: SORT_ITEMS
});

// reducer.js
import { produce } from 'immer';
import { SORT_ITEMS } from './actions';

const initialState = {
  items: [
    { id: 3, name: 'Item C' },
    { id: 1, name: 'Item A' },
    { id: 2, name: 'Item B' }
  ]
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SORT_ITEMS:
      return produce(state, draft => {
        draft.items.sort((a, b) => a.id - b.id);
      });
    default:
      return state;
  }
};

export default reducer;

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { sortItems } from './actions';

const App = () => {
  const items = useSelector(state => state.items);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(sortItems())}>Sort Items</button>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;