如何通过使用React挂钩使状态持久化在localStorage中？

Question

我在React中使用钩子创建了一个简单的todo应用程序。我创建了一个上下文文件并将其导入到主App组件中，还创建了一个reducer文件并将其也导入到主App中。现在，我想使状态（项目从上下文文件迁移）保存到localState中，然后在每次重新加载浏览器时重新加载回应用程序。

经过一些研究，我创建了一个自定义钩子，但是我仍然不知道如何解决该问题。代码如下所示。

 function usePersistedState(key, defaultVal) {
  const [myState, setMyState] = useState(() => {
    return localStorage.getItem(key) || defaultVal;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(myState));
  }, [key, myState]);

  return [myState, setMyState];
} 

Codesandbox project

我想使用已经创建的钩子来处理应用程序状态的localStorage。