Redux Toolkit 的排序逻辑应该放在哪里？

Question

我目前将一副纸牌排序的逻辑保留在单独的 util 文件中，并在切片减速器中使用它。这是 RTK 的最佳实践，还是我应该创建一个单独的选择器？如果是，它应该与该切片处于同一水平吗？我是否应该决定将其移至单独的选择器中，这会让我的切片减速器为空吗？

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { compareCards } from '../utils/customSort';

const initialState = {
  cards: [],
  status: 'idle',
  error: null
};

export const fetchCards = createAsyncThunk('cards/fetchCards', async () => {
  //fetches a shuffled deck of 52 cards
  const response = await fetch('https://firebase.com/cards.json');
  const data = await response.json();

  return data.cards;
});

const cardSlice = createSlice({
  name: 'cards',
  initialState,
  reducers: {
    sortCards(state) {
      //using it here
      state.cards = state.cards.sort(compareCards);
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchCards.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchCards.fulfilled, (state, action) => {
        state.status = 'success';
        state.cards = action.payload;
      })
      .addCase(fetchCards.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export const { sortCards } = cardSlice.actions;
export default cardSlice.reducer;

Answer 1

您可以使用createEntityAdapter。

import {
  createEntityAdapter,
  createSlice,
} from '@reduxjs/toolkit'

const cardsAdapter = createEntityAdapter<Card>({
  selectId: (card) => card.id,
  sortComparer: compareCards,
})

https://redux-toolkit.js.org/api/createEntityAdapter