Türlerle Türetilmiş Durum ve Seçiciler

Türetilmiş Durum Nedir?

// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);

Tür Güvenli Seçici İşlevleri

import type { RootState } from "./store";

const selectActiveUsers = (state: RootState): User[] =>
  state.users.filter((u) => u.isActive);

const selectUserCount = (state: RootState): number =>
  state.users.length;

reselect: Belleğe Alınmış Seçiciler

import { createSelector } from "reselect";

const selectActiveUsers = createSelector(
  (state: RootState) => state.users,
  (users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]

Türü Belirlenmiş Parametreli Seçiciler

const selectUserById = (id: string) =>
  createSelector(
    (state: RootState) => state.users,
    (users) => users.find((u) => u.id === id) ?? null
  );

// Usage: const user = useAppSelector(selectUserById("123"));

Zustand Seçicileri

const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]

useMemo ile React'te Türetilmiş Durum

const sortedUsers = useMemo(
  (): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
  [users]
);

Seçicileri Birleştirme

const selectActiveUserNames = createSelector(
  selectActiveUsers,
  (users) => users.map((u) => u.name)
); // string[]

Türetilmiş Güncellemeler için immer ile Tür Güvenli Zustand

const useStore = create<AppStore>()(immer((set) => ({
  users: [],
  activeCount: 0,
  setUsers: (users) =>
    set((draft) => {
      draft.users = users;
      draft.activeCount = users.filter((u) => u.isActive).length;
    }),
})));

Seçici Dönüş Türünü Çıkarma

// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
  (s: RootState) => s.cart.items,
  (items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);

Seçicileri Sınama

test("selectActiveUsers", () => {
  const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
  expect(selectActiveUsers(state)).toHaveLength(1);
});

Özet: Tür Güvenli Seçiciler

Hızlı Kontrol

Öğrendikleriniz