Build a reading list with a reducer and context
Finish a small reading-list app whose state lives in a store: a reducer plus two contexts (state and dispatch) and two custom hooks. The components are written; they read the store through useLibrary() and useLibraryDispatch(), which are only placeholders now.
Store: the state is { books, filter }. Write libraryReducer with the actions added (id, title; new books are unread), toggled (id: flip read), filterChanged (filter: "all", "unread" or "read") and clearedRead (remove every read book). Write LibraryProvider, which owns useReducer and provides the state and dispatch in separate contexts, then make the two hooks read them and throw a clear error outside the provider.
App: wrap the components in <LibraryProvider>. Keep <AddBook />, <FilterBar />, <BookList /> and <Footer /> without props. The ids in the markup (#title, #filter-all, #filter-unread, #filter-read, #remaining, #clear-read) and classes (li.book, .read-toggle) must stay.
What Check tests
- It starts with two books and
1 unread - Adding a book puts it at the end, unread, and clears the box
- Ticking Malgudi Days marks it read
- The unread filter shows only unread books
- The read and all filters work too
- Clear read books removes every read book
- It uses a reducer, two contexts and no props for the components
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.