TypeScript Academy · レッスン

Redux ToolkitのSliceとThunkに型を付ける

Q: 「Redux ToolkitのSliceとThunkに型を付ける」で何を学びますか？

createSliceとcreateAsyncThunkを完全な型推論で使います。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

createSliceとcreateAsyncThunkを完全な型推論で使います。

レッスン 1/413 ステップ

「Redux ToolkitのSliceとThunkに型を付ける」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

Redux Toolkitを型付けする理由

Redux Toolkit（RTK）は優れたTypeScriptサポートを備えています。適切に型付けすることで、手動の型アサーションなしにアクション、状態、非同期thunkをすべて型安全に扱えます。

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

Stateインターフェースの型付け

sliceを作成する前に、sliceの状態をTypeScriptのインターフェースとして定義します。

interface UserState {
  users: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  users: [],
  loading: false,
  error: null,
};

型付きStateでcreateSliceを使う

状態の型をジェネリックとして渡し、リデューサーが正しく型付けされた状態を受け取るようにします。

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    setLoading(state, action: PayloadAction<boolean>) {
      state.loading = action.payload; // state: UserState — typed
    },
  },
});

PayloadActionの型付け

リデューサー内のaction.payloadを型付けするには、RTKのPayloadActionを使用します。

import { PayloadAction } from "@reduxjs/toolkit";

reducers: {
  addUser(state, action: PayloadAction<User>) {
    state.users.push(action.payload); // action.payload: User
  },
}

型付きcreateAsyncThunk

戻り値、thunkの引数、thunk APIの設定に対して型を指定します。

const fetchUsers = createAsyncThunk<User[], void, { rejectValue: string }>(
  "users/fetchAll",
  async (_, { rejectWithValue }) => {
    try {
      return await api.getUsers();
    } catch (e) {
      return rejectWithValue("Failed to fetch");
    }
  }
);

extraReducersでThunkアクションを処理する

builderコールバックAPIを使うと、pending、fulfilled、rejectedのthunkアクションを完全に型付けして処理できます。

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.users = action.payload; // action.payload: User[]
        state.loading = false;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.error = action.payload ?? "Unknown error";
      });
  },
});

型付きRootStateとAppDispatch

セレクターやフックで使用できるように、ストアファイルから型付きのRootStateとAppDispatchをエクスポートします。

import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({ reducer: { users: userSlice.reducer } });
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

型付きuseSelectorとuseDispatch

Reduxフックの型付きバージョンを作成し、すべてのコンポーネントで型アサーションを繰り返さずに済むようにします。

import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

RTK Queryの型付け

RTK Queryはエンドポイント定義から完全に型付けされたフックを生成するため、レスポンスを手動で型付けする必要はありません。

const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  endpoints: (build) => ({
    getUser: build.query<User, string>({
      query: (id) => `/users/${id}`,
    }),
  }),
});
export const { useGetUserQuery } = api;

セレクターの型付け

RootStateを使って型付きセレクターを記述し、状態へのアクセスを型安全にします。

const selectUsers = (state: RootState): User[] => state.users.users;
const selectLoading = (state: RootState): boolean => state.users.loading;

まとめ：型付きRTK

Redux ToolkitのTypeScriptでは、状態のインターフェースを定義し、リデューサーでPayloadActionを使い、createAsyncThunkのジェネリックを型付けし、RootStateとAppDispatchをエクスポートして、型付きフックラッパーを作成します。

確認問題

RTKのリデューサーでaction.payloadを型安全にする型注釈はどれですか。

対話的なレッスンで答える

学習内容

Redux ToolkitのTypeScriptでは、sliceの状態インターフェースを定義し、リデューサーでPayloadActionを使い、createAsyncThunkを3つのジェネリックで型付けします。また、型付きのRootStateとAppDispatchをエクスポートし、コンポーネントで使うフックラッパーを作成します。

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 101
レッスン: 352

無料で学習を始めるコース全体を表示

よくある質問

「Redux ToolkitのSliceとThunkに型を付ける」レッスンは無料ですか？

はい。「Redux ToolkitのSliceとThunkに型を付ける」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「Redux ToolkitのSliceとThunkに型を付ける」で何を学びますか？

createSliceとcreateAsyncThunkを完全な型推論で使います。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Redux ToolkitのSliceとThunkに型を付ける」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← TypeScript Academyに戻る