ReduxのstateをRedux DevToolsを使って手動で変更する

Reduxの状態を確認できるchromeの拡張機能の「Redux DevTools」を利用することで、手動でReduxのstateを変更できる。
https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?pli=1

手順

1. Dispatcherを表示する

開発者ツール > Reduxを表示した際に、Actionの入力欄などが表示されていない場合は、赤枠で囲った右下のShow Dispatcherボタンをクリックすると表示される。

↓ Show Dispatcherボタンをクリック

2. Actionを入力する

手順１で表示されたActionの入力欄に、Reduxのstoreへ送信したいActionを入力する。

基本的なActionの入力形式

{
  type: "sliceのnameプロパティの値/実行するreducerの名前",
  payload: "reducerに渡すデータ" // 実行するreducerがactionを受け取らない場合は、省略する。
}

3. Dispatchボタンをクリックする

最後に、右下に表示されているDispatchボタンクリックすることで、Reduxのstoreへ手順２で入力したActionが送信され、stateが更新される。

Actionの入力例

以下のようなSliceを定義している場合に、それぞれのreducerを実行するためのActionの例を記載する。

userSlice.ts

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

export type Name = {
  first: string;
  last: string;
};

export type User = {
  name: Name;
  email: string;
};

const initialState: User = {
  name: {
    first: "",
    last: "",
  },
  email: "",
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUser: (_, action: PayloadAction<User>) => {
      return action.payload;
    },
    setName: (state, action: PayloadAction<Name>) => {
      state.name = action.payload;
    },
    setEmail: (state, action: PayloadAction<string>) => {
      state.email = action.payload;
    },
    resetState: () => {
      return initialState;
    },
  },
});

setUser

{
  type: "user/setUser",
  payload: {
    name: {
      first: "太郎",
      last: "田中",
    },
    email: "[e-mail]"
  }
}

setName

{
  type: "user/setName",
  payload: {
    first: "太郎",
    last: "田中",
  }
}

setEmail

{
  type: "user/setEmail",
  payload: "[e-mail]"
}

resetState

{
  type: "user/resetState",
}