React+Redux+Toolkitのメモ

ReactでReduxを使ったときのメモです。
@reduxjs/toolkitを使っています。

1. 動かす

公式によると、official Redux+JS templateかRedux+TS templateを推奨しているようなので、これを参考にしました。

ReduxとToolkitのインストール

npm install redux react-redux
npm install @reduxjs/toolkit

今回は下記画面のようにhttps://jsonplaceholder.typicode.com/usersからユーザを取得する画面で試しました。入力フィールドにidを入力すると、そのidのuserを取得してテーブルに表示します。ステータスとダウンロード時間も表示します。

Reduxで管理する値は下記にしました。Sliceの名前も記載します。
・入力フィールド→inputTextSlice
・jsonplaceholderからダウンロードしたuser(配列)→usersSlice
・ステータス、ダウンロード時間→loadStatusSlice

StoreにはSliceを登録します。Sliceには管理したい値と、値に対してアクションするための関数を登録します。

usersSliceを例にして各ソースコードの関係図を示します。

線あり

線なし

ソースのGitHubはココ

2.Redux DevToolsでStoreを確認

ChromeにRedux DevTools拡張機能を入れてStoreの中身が見れます。

これをオフにするには、StoreにdevTools:falseを設定します。(デフォルトはtrue)

Store.ts

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import loadStatusSlice from './loadStatusSlice';
import inputTextSlice from './inputTextSlice';
import usersSlice from "./usersSlice";

export const store = configureStore({
  reducer: {
    loadStatus: loadStatusSlice,
    inputText: inputTextSlice,
    users: usersSlice,
  },
  devTools: false
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

参考

ここを参考にさせていただきました。