如何在redux state对象内的数组排序时使React组件重新呈现

// actionTypes.js
export const SORT_ARRAY = "SORT_ARRAY";

// actionCreators.js
export const sortArray = (field, order) => {
  return {
    type: SORT_ARRAY,
    payload: {
      field,
      order,
    },
  };
};

// reducer.js
import { SORT_ARRAY } from "./actionTypes";

const initialState = {
  dataArray: [], // 需要排序的数组
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SORT_ARRAY:
      const { field, order } = action.payload;
      const sortedArray = [...state.dataArray].sort((a, b) => {
        // 根据排序字段和顺序进行比较
        // 这里仅示例了按字段为字符串进行排序的情况
        if (a[field] < b[field]) {
          return order === "asc" ? -1 : 1;
        }
        if (a[field] > b[field]) {
          return order === "asc" ? 1 : -1;
        }
        return 0;
      });
      return {
        ...state,
        dataArray: sortedArray,
      };
    default:
      return state;
  }
};

import React from "react";
import { connect } from "react-redux";
import { sortArray } from "./actionCreators";

const YourComponent = ({ dataArray, onSort }) => {
  // 在组件中使用排序后的数组进行渲染
  // ...

  return (
    <div>
      {/* 触发排序操作 */}
      <button onClick={() => onSort("fieldName", "asc")}>按字段升序排序</button>
      <button onClick={() => onSort("fieldName", "desc")}>按字段降序排序</button>
    </div>
  );
};

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

const mapDispatchToProps = (dispatch) => {
  return {
    onSort: (field, order) => dispatch(sortArray(field, order)),
  };
};

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