A to-do list with Redux Toolkit
Write a todosSlice with createSlice (name todos, initial state { items: [] }) and two reducers: added(state, action) pushes { id, text: action.payload, done: false }, and toggled(state, action) flips done on the todo whose id is action.payload. Write them in the mutating style: Immer makes it safe.
Create the store with configureStore and wrap the app in <Provider store={store}>.
The input has id="new" and the button id="add". Each todo is an <li> inside <ul id="list">; clicking an <li> toggles it and gives it className="done" when done. <p id="left"> shows how many are not done, like 2 left. Don't add empty todos.
What Check tests
- Adding two todos shows two list items
- The counter says
2 left - Clicking a todo marks it done
- Clicking it again un-marks it
- Empty text adds nothing
- Uses
createSlice,configureStoreand<Provider>
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.