🦙

【React】redux-persistで文字列を値として保存できるか

に公開
React
Redux
tech

概要

redux-persistはStoreの永続化にredux-persistを使うの記事で紹介されている通り、reduxのstoreの情報をlocalStorage等に保存できるライブラリです。
このredux-persistでトークンなどの文字列のみを状態として扱う時に保存できるか、というのを試してみたのでメモ書きです。

前提

  • 使用したredux-persistのバージョンは6.0.0です。

試してみたコード

以下のように、stateの型にstring | nullを設定してトークンの文字列だけを設定するsliceを用意します。結果としては文字列はうまく保存できませんでした。

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/es/storage";

export const authStorageSlice = createSlice({
  name: "authStorage",
  initialState: null as string | null,
  reducers: {
    updateAuthToken: (state, action: PayloadAction<string>) => {
      state = action.payload;
    },
    clearAuthToken: (state) => {
      state = null;
    },
  },
});

// 永続化設定
const authStoragePersistConfig = {
  key: "authStorage",
  storage,
};

// persistReducerでラップ
export const persistedAuthStorageReducer = persistReducer(
  authStoragePersistConfig,
  authStorageSlice.reducer
);

export const { updateAuthToken, clearAuthToken } = authStorageSlice.actions;

原因や対応など

redux-persistのcreatePersistoid.tsに保存する時のserializeのロジックがあるのですが、基本的にはデフォルトのserializeとしてJSON.stringifyが用いられます。serializeをfalseにするとJSON.stringifyが走らずにそのまま保存されるのかと思ったのですが、このロジックに入る時はObjectが前提っぽいですので難しそうです。

というわけで、文字列をそのまま保存するのではなく素直にオブジェクトの型を定義して保存するのが対応です。

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/es/storage";

type AuthStorageState = { authToken?: string };

export const authStorageSlice = createSlice({
  name: "authStorage",
  initialState: { authToken: undefined } as AuthStorageState,
  reducers: {
    updateAuthToken: (state, action: PayloadAction<string>) => {
      state.authToken = action.payload;
    },
    clearAuthToken: (state) => {
      state.authToken = undefined;
    },
  },
});

// 永続化設定
const authStoragePersistConfig = {
  key: "authStorage",
  storage,
};

// persistReducerでラップ
export const persistedAuthStorageReducer = persistReducer(
  authStoragePersistConfig,
  authStorageSlice.reducer
);

export const { updateAuthToken, clearAuthToken } = authStorageSlice.actions;

Discussion