Issues
The state.todolist is being persisted to localStorage, as evidenced by your screenshot. There were a few issues I found in the code in your sandbox though.
NavBar is using raw anchor (<a>) tags instead of the react-router-dom Link component to effect navigation actions. These will reload the page and reset any local React component state.
- The
Todolist component was using an incorrect object reference comparison to filter the selected state.todolist state against the current state.ui.currTodoProject value. These are both objects and after the state has been JSON serialized into localStorage and then JSON deserialized back into the Redux store, these will no longer have shallow reference equality... they are completely new and different objects.
Suggested Solution
Update NavBar to use the Link component.
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;
Update Todolist compare the project objects *by their _id properties. There's also no need to duplicate the todolist into any local state, simply compute the current currTodos value from the selected todolist state.
const currTodos = todolist.filter(
(t) => t.project._id === ui.currTodoProject._id
);
If computed this derived state is expensive use the useMemo hook to memoize the computed value. In fact, just about any time you see yourself writing a useState/useEffect hook combo, this is what useMemo is for.
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;
state.todoListstate from being persisted, e.g. it's not black listed in the persist configuration. Think you could stand up a running codesandbox demo that reproduces this issue that we could inspect live?