sync then reload setting

src/hooks/Setting.js

@@ -7,10 +7,11 @@ import { createContext, useCallback, useContext } from "react";
 const SettingContext = createContext({
   setting: null,
   updateSetting: async () => {},
+  reloadSetting: async () => {},
 });
 
 export function SettingProvider({ children }) {
-  const { data, update } = useStorage(STOKEY_SETTING, DEFAULT_SETTING);
+  const { data, update, reload } = useStorage(STOKEY_SETTING, DEFAULT_SETTING);
   const {
     sync: { settingUpdateAt },
     updateSync,
@@ -31,6 +32,7 @@ export function SettingProvider({ children }) {
       value={{
         setting: data,
         updateSetting,
+        reloadSetting: reload,
       }}
     >
       {children}

src/hooks/Storage.js

@@ -25,16 +25,20 @@ export function useStorage(key, defaultVal = null) {
     await storage.del(key);
   }, [key]);
 
-  useEffect(() => {
-    (async () => {
-      const val = await storage.getObj(key);
-      if (val) {
-        setData(val);
-      } else if (defaultVal) {
-        await storage.setObj(key, defaultVal);
-      }
-    })();
+  const reload = useCallback(async () => {
+    const val = await storage.getObj(key);
+    if (val) {
+      setData(val);
+    } else if (defaultVal) {
+      await storage.setObj(key, defaultVal);
+    }
   }, [key, defaultVal]);
 
-  return { data, save, update, remove };
+  useEffect(() => {
+    (async () => {
+      await reload();
+    })();
+  }, [reload]);
+
+  return { data, save, update, remove, reload };
 }