現象

redux-persist で initialState に state を追加すると、その state の初期値が undefined になってしまう 特に配列やオブジェクトを初期値にすると、undefined の要素にアクセスしようとしてエラーになる

原因

LocalStorage や AsyncStorage にすでに保存されたデータがある場合、それが initialState となるので、あとから state を追加しても要素がなく undefined となるため

対処法

今のところ、対処法は 2 つのいずれかか

• 初期値を undefined もしくは falsy な値にする
• redux-persist の migrate オプションを使って、保存されたデータを新しい state にマイグレーションする

初期値を undefined もしくは falsy な値にする

初期値を undefined もしくは falsy な値にすることで、保存されたデータがない場合に初期値が使われるようになる

const initialState = {
  favorite: {
    animal: undefined,
  },
};

redux-persist の migrate オプションを使って、保存されたデータを新しい state にマイグレーションする

migrations を作る

const migrations = {
  1: (state) => {
    return {
      ...state,
      favorite: {
        ...state.favorite,
        animal: "Tiger",
      },
    };
  },
};

それを persistConfig の migrate に createMigrate()して渡す その際に persistConfig の version と migrations のキーの version の state の差分を見てマイグレーションが行われる

const persistConfig = {
  key: "root",
  version: 1,
  storage,
  debug: true,
  migrate: createMigrate(migrations, { debug: true }),
};

参考 https://qiita.com/kterui9019/items/3db1d1483d36e5456498 https://dev.to/sasurau4/how-to-migrate-store-persisted-by-redux-persist-5dng https://github.com/rt2zz/redux-persist/blob/master/docs/migrations.md