如何使用localStorage与useReducer挂钩？

Question

我有一个todo应用程序，是用useReducer创建的，我需要将它们保存到localStorage中，但是我得到了一个error.What可能出错了吗？

​

const [{ todos, todoCount }, dispatch] = useReducer(
    reducer,
    {
      todos: [],
      todoCount: 0
    },
    (initial) => JSON.parse(localStorage.getItem("todos")) || initial
  );
 
  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

​

我得到了这个错误:抛出了一个跨源错误。React无法访问开发中的实际错误对象。有关详细信息，请参阅https://reactjs.org/link/crossorigin-error。

当我用useReducer编写一个简单的计数器应用程序时，我保存到localStorage的方式与此相同，但它不起作用

Answer 1

需要使用useContext+useReducer+localStorage：

​

 const initialState = {
    todos:
      localStorage.getItem("todos") == null
        ? []
        : JSON.parse(localStorage.getItem("todos"))
  };
  const [{ todos }, dispatch] = useReducer(
    reducer,
    /* {
      todos: [],
      todoCount: 0
    }*/
    initialState
  );
  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

​