Topic
Definition
A Redux Toolkit slice can hold a client-only draft that survives navigation until the user submits or discards it; after Nest accepts the write, reset the draft and invalidate the Query cache.
In simpler words
Practice the happy path: type in RTK, save with Nest, then clear the draft and refresh the list.
This is our Redux Essentials-style lab: use RTK for a composer draft after Quick Start, then ship it in Week 4 Notes projects.
While you type, Nest does not know the draft yet — RTK remembers it.
When create succeeds, Nest owns the new row. Clear the RTK draft and tell TanStack Query to refetch the list.
If create fails, keep the draft so the user can fix and retry.
const draft = useAppSelector((s) => s.notesDraft);
const mutation = useMutation({
mutationFn: () => notesApi.create({
title: draft.title,
body: draft.body,
}),
onSuccess: async () => {
dispatch(notesDraftActions.reset());
await queryClient.invalidateQueries({ queryKey: noteKeys.lists() });
},
});Same pattern you will implement in Week 4 Notes UI projects.
await create(draft);
// draft still full — composer looks dirty foreverReset only after Nest confirms.
Do not sync draft ↔ Nest entity with an Effect on every prop change — remount with key={id} or initialize once.
Do not store JWTs in RTK; cookies stay httpOnly.
// Wrong
useEffect(() => setDraft(note), [note]);
// Right
<Editor key={note.id} />Avoid ping-pong sync Effects.
Live playground
Edit step/title, then reset like a successful Nest create.
Mini createSlice feel: dispatch named actions → state updates → UI re-renders.
value=0 · title="(empty)"
createSlice → configureStore → Provider → dispatch(action)
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 2 · syntax 2 · practical 3 · logic 3