Fullstack CourseLearn by building
Back to examples

Where should this state live?

Watch two stores update — draft on the left, server list on the right.

Week 2 · state

Try it

Type a draft, then Save. Only the left store should change while you type; Save appends to the right list and clears the draft.

Client store (RTK)
{
  "draft": "",
  "selectedId": null
}
Server list (Query cache)
{
  "todos": [
    {
      "id": "1",
      "title": "Buy milk"
    },
    {
      "id": "2",
      "title": "Ship Week 2 Todo"
    }
  ]
}

Draft text lives in client state until you save. The list is server data — do not keep a copy of it in Redux.

Mistake to avoid

That duplicates Query’s job. You now have two sources of truth — toggle this off by saving a new draft (clears the bad copy).

Quick map

KindTool
Local UIuseState / useReducer
Server / Nest dataTanStack Query + Axios
Cross-route client draftRedux Toolkit
Shareable filtersURL search params