Redux + TypeScript でのredux-localstorage利用方法について

Question

#現象
React + TypeScriptにてlocalstrageを利用したいのですが
実装方法が分からずで困っています。

LocalStorageでの保存が可能であればよいので
JavaScriptなどで対応すべきなのでしょうか。。。

#ソース

// import { Store } from "redux";
import { createStore, combineReducers } from "redux";
// import { createStore, applyMiddleware, combineReducers, compose } from "redux";
import speakReducer, { SpeakState } from "./speak/reducers";
// import thunk from "redux-thunk";
// import speak from "./speak";

export type AppState = {
  speak: SpeakState;
};

const store = createStore(
  combineReducers<AppState>({    ※この辺いじってできたら理想。
    speak: speakReducer,
  })
);

export default store;

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./views/App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import store from "./state/store";

// const store = configureStore();

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import { Reducer } from "redux";
import { Fold, File } from "speak";
import { Actions, ActionTypes } from "./actions";

export type SpeakState = {
  folders: Fold[];
  files: File[];
  // check: boolean;
};

export const initialState: SpeakState = {
  folders: [
    {
      folderId: 1,
      name: "果物",
      text: "A",
      opened: true,
    },
    {
      folderId: 2,
      name: "こってり系",
      text: "B",
      opened: true,
    },
    {
      folderId: 3,
      name: "飲み物",
      text: "C",
      opened: false,
    },
  ],
  files: [
    {
      folderId: 1,
      fileId: 1,
      name: "りんご",
      text: "apple",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 1,
      fileId: 2,
      name: "ぶどう",
      text: "grape",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 1,
      fileId: 3,
      name: "シャンパン",
      text: "Champagne",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 1,
      fileId: 4,
      name: "しょうゆ",
      text: "Soy sauce",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 2,
      fileId: 1,
      name: "塩",
      text: "salt",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 2,
      fileId: 2,
      name: "豚骨",
      text: "pork bone",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 2,
      fileId: 3,
      name: "鶏",
      text: "chicken",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 3,
      fileId: 1,
      name: "酸辣湯麺",
      text: "hot and sour noodles",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 3,
      fileId: 2,
      name: "トンカツ",
      text: "pork cutlet",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 3,
      fileId: 3,
      name: "ラーメン",
      text: "ramen",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 3,
      fileId: 4,
      name: "日本酒",
      text: "Japanese sake",
      checked: false,
      listening: false,
      indicate: true,
    },
    {
      folderId: 3,
      fileId: 5,
      name: "ワイン",
      text: "Wine",
      checked: false,
      listening: false,
      indicate: true,
    },
  ],
};

const speakReducer: Reducer<SpeakState, Actions> = (
  state = initialState,
  action
) => {
  switch (action.type) {
    case ActionTypes.CHANGE_SEARCH: {
      if (action.payload.text) {
        state.files
          .filter((file) => file.text.includes(action.payload.text))
          .forEach((file) => {
            file.indicate = false;
          });
      } else {
        state.files.forEach((file) => {
          file.indicate = true;
        });
      }
      return {
        ...state,
      };
    }
    case ActionTypes.CLICK_FOLDER: {
      state.folders.forEach((folder) => {
        if (folder.folderId === action.payload.id) {
          folder.opened = !folder.opened;
        }
      });
      return {
        ...state,
      };
    }
    case ActionTypes.CLICK_PLAY: {
      const folderId = action.payload.folderId;
      const fileId = action.payload.folderId;
      const playBefore = action.payload.playBefore;
      if (folderId && fileId) {
        // 単独
        state.files
          .filter(
            (file) => file.folderId === folderId && file.fileId === fileId
          )
          .forEach((file) => {
            file.listening = playBefore;
          });
      }
      return {
        ...state,
      };
    }
    case ActionTypes.CLICK_FILE: {
      // チェック対象ファイル
      const target = state.files.filter(
        (file) =>
          file.folderId === action.payload.folderId &&
          file.fileId === action.payload.fileId
      );
      target[0].checked = !action.payload.checked;
      return {
        ...state,
      };
    }
    case ActionTypes.CLICK_ALL: {
      // チェック対象フォルダ
      const targetFolders = state.folders.filter(
        (fold) => fold.opened === true
      );
      // チェック対象ファイル
      const targetFoldId = [
        targetFolders.map((fold) => {
          return fold.folderId;
        }),
      ];
      state.files.forEach((file) => {
        if (targetFoldId[0].includes(file.folderId)) {
          file.checked = action.payload.checked;
        }
      });

      return {
        ...state,
      };
    }
    case ActionTypes.FOLDER_ADD: {
      alert("aaaaaaaa");
      return {
        ...state,
      };
    }

    case ActionTypes.FOLDER_DEL: {
      alert("folder.del");
      return {
        ...state,
      };
    }

    case ActionTypes.FILE_ADD: {
      alert("file.add");
      return {
        ...state,
      };
    }

    case ActionTypes.FILE_DEL: {
      alert("file.del");
      return {
        ...state,
      };
    }

    case ActionTypes.MUSIC_START: {
      alert("music.start");
      return {
        ...state,
      };
    }
    case ActionTypes.MUSIC_STOP: {
      alert("music.stop");
      return {
        ...state,
      };
    }
    case ActionTypes.MUSIC_END: {
      alert("music.end");
      return {
        ...state,
      };
    }

    default: {
      return state;
    }
  }
};

export default speakReducer;

#環境
Windows
React(re-ducks)
TypeScript

Answer 1

以下で自己解決できました。
下記記載はReactなので型指定は不要。

const reducer: Reducer = combineReducers({
  speak: speakReducer,
});

export default function createStore() {
  return compose(persistState())(reduxCreateStore)(reducer);
}