fix localStorage not persistent

src/containers/Editor/index.tsx

@@ -5,7 +5,6 @@ import { LiveEditor } from "src/containers/LiveEditor";
 import { Loading } from "src/components/Loading";
 import { Incompatible } from "src/containers/Incompatible";
 import * as Styles from "src/containers/Editor/styles";
-import { ConfigActionType } from "src/reducer/reducer";
 import { useConfig } from "src/hocs/config";
 
 const JsonEditor = dynamic(() => import("src/containers/JsonEditor"), {
@@ -16,32 +15,8 @@ const JsonEditor = dynamic(() => import("src/containers/JsonEditor"), {
 export const Editor: React.FC = () => {
   const {
     states: { settings },
-    dispatch,
   } = useConfig();
 
-  React.useEffect(() => {
-    const jsonStored = localStorage.getItem("json");
-    if (jsonStored)
-      dispatch({ type: ConfigActionType.SET_JSON, payload: jsonStored });
-
-    const configStored = localStorage.getItem("config");
-    if (configStored)
-      dispatch({
-        type: ConfigActionType.SET_CONFIG,
-        payload: JSON.parse(configStored),
-      });
-  }, [dispatch]);
-
-  React.useEffect(() => {
-    localStorage.setItem(
-      "config",
-      JSON.stringify({
-        ...settings,
-        zoomPanPinch: undefined,
-      })
-    );
-  }, [settings]);
-
   return (
     <Styles.StyledPageWrapper>
       <Sidebar />

src/hocs/config.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { defaultConfig, defaultJson } from "src/constants/data";
-import { ReducerAction, useConfigReducer } from "src/reducer/reducer";
+import {
+  ConfigActionType,
+  ReducerAction,
+  useConfigReducer,
+} from "src/reducer/reducer";
 import { ReactComponent, StorageConfig } from "src/typings/global";
 
 export interface AppConfig {
@@ -29,9 +33,35 @@ const ConfigContext: React.Context<Config> =
 const useConfig = () => React.useContext(ConfigContext);
 
 const WithConfig: ReactComponent = ({ children }) => {
+  const [render, setRender] = React.useState(false);
   const [states, dispatch] = React.useReducer(useConfigReducer, initialStates);
   const value = { states, dispatch };
 
+  React.useEffect(() => {
+    const jsonStored = localStorage.getItem("json");
+    if (jsonStored)
+      dispatch({ type: ConfigActionType.SET_JSON, payload: jsonStored });
+
+    const configStored = localStorage.getItem("config");
+    if (configStored)
+      dispatch({
+        type: ConfigActionType.SET_CONFIG,
+        payload: JSON.parse(configStored),
+      });
+    setRender(true);
+  }, [dispatch]);
+
+  React.useEffect(() => {
+    if (render)
+      localStorage.setItem(
+        "config",
+        JSON.stringify({
+          ...states.settings,
+          zoomPanPinch: undefined,
+        })
+      );
+  }, [states.settings, render]);
+
   return (
     <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>
   );

src/reducer/reducer.ts

@@ -28,7 +28,10 @@ export const useConfigReducer: React.Reducer<AppConfig, ReducerAction> = (
 ) => {
   switch (action.type) {
     case ConfigActionType.SET_CONFIG:
-      return { ...state, settings: action.payload };
+      return {
+        ...state,
+        settings: action.payload,
+      };
 
     case ConfigActionType.TOGGLE_THEME:
       return {