สถานะที่อนุมานและตัวเลือกด้วยชนิด

state ที่คำนวณได้คืออะไร

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

ฟังก์ชันเลือกข้อมูลที่มีชนิดข้อมูล

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: ฟังก์ชันเลือกข้อมูลที่จดจำผลลัพธ์

import { createSelector } from "reselect";

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

ฟังก์ชันเลือกข้อมูลแบบมีพารามิเตอร์ที่มีชนิดข้อมูล

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

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

ฟังก์ชันเลือกข้อมูลของ Zustand

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

state ที่คำนวณได้ใน React ด้วย useMemo

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

การประกอบฟังก์ชันเลือกข้อมูล

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

Zustand ที่ปลอดภัยด้านชนิดข้อมูลด้วย immer สำหรับการอัปเดตที่คำนวณได้

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

การอนุมานชนิดข้อมูลที่ส่งคืนของฟังก์ชันเลือกข้อมูล

// 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
);

การทดสอบฟังก์ชันเลือกข้อมูล

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

สรุป: ฟังก์ชันเลือกข้อมูลที่มีชนิดข้อมูล

ตรวจสอบความเข้าใจ

สิ่งที่คุณได้เรียนรู้