Сортировка объектов массивов по столбцам в таблице (React & Redux)

Здраствуйте, в первый раз столкнулся с этим и немного не понимаю. Я хочу сделать сортировку (возрастание/убывание) по столбцам, передавая тип. Не понимаю как это сделать в Redux.. Вот мой reducer:

import {
  POSTS_GET_REQUEST,
  POSTS_GET_SUCCESS,
  POSTS_GET_ERROR,
  POSTS_SORT,
  POSTS_CURRENT_PAGE
} from '../actions';

const INIT_STATE = {
  posts: null,
  loading: false,
  error: null,
  currentPage: 1,
  perPage: 10,
  totalCount: 0
};

const posts = (state = INIT_STATE, action) => {
  switch (action.type) {
    case POSTS_GET_SUCCESS:
      return {
        ...state,
        posts: action.payload,
        totalCount: action.payload.total_count,
        loading: false,
      }

    case POSTS_GET_REQUEST:
      return {
        ...state,
        loading: true,
      }

    case POSTS_GET_ERROR:
      return {
        ...state,
        error: action.payload,
      }

      case POSTS_CURRENT_PAGE:
        return {
          ...state,
          currentPage: action.payload,
        }

    case POSTS_SORT:
      let copyData = state.posts.slice();
      const sortedData = 
        copyData.sort((a, b) => a.title> b.title? 1 : -1);
        // Функция сортировки, не понимаю как передать тип (к примеру не только title)
      console.log(sortedData)
      return {
        ...state,
        posts: sortedData,
      }
      
      default:
        return state
  }
};

export default posts;

Мой экшен:

const sortPosts = (posts) => ({
  type: POSTS_SORT,
  payload: posts
});

А вот мой компонент:

import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, ButtonToolbar, ButtonGroup } from 'react-bootstrap';

import { sortPosts } from '../../../redux/posts/actions';
import { getPosts, postsCurrentPage } from '../../../redux/posts/actions';
import './Table.css';

const Table = (type) => {

  const dispatch = useDispatch();
  const {posts} = useSelector((state) => state.posts); 
  
  const pages = [1,2,3,4,5];

  useEffect(() => {
    // console.log(1);
    dispatch(getPosts())
  }, [dispatch]);

  return (
    <div className="table-page">
      <div className="header-table">
        <Button
          id="table-btn-id"
          onClick={() => dispatch(sortPosts('id'))} > 
             // Здесь я передаю экшен
          <h6>ID</h6>
          <i className="fa-solid fa-angle-down"></i>
        </Button>
        <Button
          id="table-btn-head"
          onClick={() => dispatch(sortPosts('title'))} >
          <h6>Заголовок</h6>
          <i className="fa-solid fa-angle-down"></i>
        </Button>
        <Button
          id="table-btn-desc"
          onClick={() => dispatch(sortPosts('body'))} >
          <h6>Описание</h6>
          <i className="fa-solid fa-angle-down"></i>
        </Button>
      </div>
      <div className="table-section">
        <table className="table table-bordered table-hover">
          <tbody>
            {posts?.map(
              ((item) => (
                <tr key={item.id}>
                  <th 
                    className="th" 
                    id='id' 
                    scope="row">
                    {item.id}
                  </th>
                  <td id='title'>{item.title}</td>
                  <td id='body'>{item.body}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
      <footer>
        <div>
          <Button
            variant="light"
            id="footer-btn-back">
            <h6>Назад</h6>
          </Button>
        </div>
        <div className='pages'>
          <ButtonToolbar aria-label="Toolbar with button groups">
            {pages.map((page, index) => 
              <ButtonGroup
                key={index}
                className="me-2" 
                aria-label="First group">
                <Button 
                  id="btn-routes" 
                  variant="light"
                  onClick={() => dispatch(postsCurrentPage(page))}>
                  {page}
                </Button>              
              </ButtonGroup>
            )}
            
          </ButtonToolbar>
        </div>
        <div>
          <Button
            variant="light"
            id="footer-btn-further">
            <h6>Далее</h6>
          </Button>
        </div>
      </footer>
    </div>
  )
};

export default Table;