问题

state.todolist被持久化到localStorage，正如您的屏幕截图所示。不过，我在你的沙箱中发现了一些代码问题。

1. NavBar使用原始锚（<a>）标记而不是react-router-domLink组件来实现导航操作。这些将重新加载页面并重置任何本地React组件状态。
2. Todolist组件使用了错误的对象引用比较来根据当前state.ui.currTodoProject值筛选选定的state.todolist状态。这些都是对象，在状态被JSON序列化到localStorage中，然后JSON反序列化回到Redux存储中之后，它们将不再具有浅引用相等性......它们是全新的不同的物体。

建议方案

更新NavBar以使用Link组件。

import "./NavBar.styles.css";
import { Link } from "react-router-dom";
import { persistor } from "../../../store/index.js";

const NavBar = () => {
  const purgeCache = () => {
    persistor
      .purge()
      .then(() => console.log("Cache Pruged!"))
      .catch(() => console.log("Could Not Purge Cache..."));
  };
  
  return (
    <nav>
      <ul>
        <li>
          <Link to="/todolist">Todo List</Link>
        </li>
        <li>
          <Link to="/notes">Notes</Link>
        </li>
        <li style={{ float: "right" }} onClick={purgeCache}>
          <Link to="/">Purge Store</Link>
        </li>
      </ul>
    </nav>
  );
};

export default NavBar;

更新Todolist通过_id属性比较项目对象 *。也不需要将todolist复制到任何本地状态，只需从选定的todolist状态计算当前currTodos值。

const currTodos = todolist.filter(
  (t) => t.project._id === ui.currTodoProject._id
);

如果计算这个派生的状态是昂贵的，使用useMemo钩子来记忆计算的值。事实上，几乎任何时候你看到自己在写useState/useEffect钩子组合，这就是useMemo的用途。

const currTodos = useMemo(() => todolist.filter(
  (t) => t.project._id === ui.currTodoProject._id
), [todolist, ui.currTodoProject._id]);

...

const Todolist = () => {
  const todolist = useSelector((state) => state.todolist);
  const projects = useSelector((state) => state.todolistProjects);
  const ui = useSelector((state) => state.ui);
  const dispatch = useDispatch();

  const [deletedTodo, setDeletedTodo] = useState({});

  useEffect(() => {
    dispatch(changeTodoProject(projects[0]));
  }, []);

  const currTodos = todolist.filter(
    (t) => t.project._id === ui.currTodoProject._id
  );
  
  ...

  return (
    <div id="todolist" onClick={handleContainerClick}>
      ...
      {currTodos.map((todo) => {
        return (
          <Todo
            todo={todo}
            key={todo._id}
            showDeleteDialog={showDeleteDialog}
            setDeletedTodo={setDeletedTodo}
          />
        );
      })}
      ...
    </div>
  );
};

export default Todolist;