🌀

【React】 Redux Toolkitでstateに直接nullを設定可能にし、オブジェクトの有無を判断できるようにしたい

に公開
React
ReduxToolkit
tech

概要

Redux ToolkitでStateを管理する時はRedux Toolkit サクッと入門の記事にある通り、initialStateに初期値を入れたオブジェクトを設定すると思います。もちろんオブジェクトの値で状態を管理する方法は全然ありなのですが、そもそもオブジェクト自体がnullの状態を管理する実装ができるか今回試してみました。

前提

  • 使用したRedux Toolkitのバージョンは2.8.2です。

対応方針など

  • Redux ToolkitのテストコードcreateSlice.test.tsにある通り、initialStateにundefinedを設定するとエラーになります。ただ、nullは許容してるようなので型としてはnullを使用します。
  • 更新時はオブジェクトのフィールドを個別に更新するのではなく、オブジェクト自体を入れ替える形にします。ドキュメントにあるResetting and Replacing Stateの方法で実装します。

実装サンプル

以下がUserAccountという型をnull許容にして、state更新時はオブジェクト自体を入れ替える実装になります。

type UserAccountState = UserAccount | null;

export const userAccountSlice = createSlice({
  name: "userAccount",
  initialState: null as UserAccount,
  reducers: {
    updateUserAccount: (_, action: PayloadAction<UserAccount>) => {
      return action.payload;
    },
    clearUserAccount: () => {
      return null;
    },
  },
});

export const { updateUserAccount, clearUserAccount } = userAccountSlice.actions;
export const userAccountSliceReducer = userAccountSlice.reducer;

Discussion