udpate handSlice

src/reducers/duel/handsSlice.ts

-import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
+import {
+  PayloadAction,
+  CaseReducer,
+  createAsyncThunk,
+  ActionReducerMapBuilder,
+} from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
 import { RootState } from "../../store";
-import { CardMeta } from "../../api/cards";
+import { CardMeta, fetchCard } from "../../api/cards";
 
 export interface Hands {
   cards: CardMeta[];
@@ -37,6 +42,29 @@ export const opAddHandsImpl: CaseReducer<DuelState, PayloadAction<number[]>> = (
   }
 };
 
+export const fetchMeHandsMeta = createAsyncThunk(
+  "duel/fetchMeHandsMeta",
+  async (Ids: number[]) => {
+    return await Promise.all(
+      Ids.map(async (id) => {
+        return await fetchCard(id);
+      })
+    );
+  }
+);
+
+export const meHandsCase = (builder: ActionReducerMapBuilder<DuelState>) => {
+  builder.addCase(fetchMeHandsMeta.fulfilled, (state, action) => {
+    // TODO: 合法性校验
+    const cards = action.payload;
+    if (state.meHands) {
+      state.meHands.cards = cards;
+    } else {
+      state.meHands = { cards };
+    }
+  });
+};
+
 export const selectMeHands = (state: RootState) =>
   state.duel.meHands || { cards: [] };
 export const selectOpHands = (state: RootState) =>

src/reducers/duel/mod.ts

@@ -5,7 +5,12 @@
 
 import { createSlice } from "@reduxjs/toolkit";
 import { InitInfo, meInfoInitImpl, opInfoInitImpl } from "./initInfoSlice";
-import { Hands, meAddHandsImpl, opAddHandsImpl } from "./handsSlice";
+import {
+  Hands,
+  meAddHandsImpl,
+  opAddHandsImpl,
+  meHandsCase,
+} from "./handsSlice";
 import { RootState } from "../../store";
 
 export interface DuelState {
@@ -26,6 +31,9 @@ const duelSlice = createSlice({
     meAddHands: meAddHandsImpl,
     opAddHands: opAddHandsImpl,
   },
+  extraReducers(builder) {
+    meHandsCase(builder);
+  },
 });
 
 export const { meInfoInit, opInfoInit, meAddHands, opAddHands } =