Redux/Redux Toolkit Assignment – 5

Basic Questions

  1. Run the same useGetPostsQuery() hook twice in two components and verify caching prevents duplicate API calls.
  2. Add providesTags: [‘Post’] to a query and check cache tagging in DevTools.
  3. Invalidate cache manually using invalidateTags after a createPost mutation.
  4. Refetch all posts by calling refetch() on a query result.
  5. Set a query to automatically refetch when a window regains focus (refetchOnFocus: true).
  6. Enable background polling with pollingInterval: 5000 for a live feed.
  7. Demonstrate cache being replaced when calling useGetUserQuery(1) vs useGetUserQuery(2).
  8. Configure cache lifetime using keepUnusedDataFor: 30 seconds.
  9. Create an endpoint that fetches comments and tie it to the same cache tag as posts.
  10. Observe how mutation invalidation automatically updates cached queries.
  11. Show how errors appear with isError when an API call fails.
  12. Display API error messages in UI using error.error.
  13. Add fallback UI rendering when a query returns an error.
  14. Write an optimistic update for adding a post and then roll back if the server fails.
  15. Apply optimistic update for deleting an item (remove from UI first, then restore on failure).
  16. Keep Redux state minimal by storing only IDs in posts state instead of full objects.
  17. Write a normalized state example for users with entities + ids.
  18. Use a selector to fetch a single post by id.
  19. Organize state into separate userSlice and postSlice.
  20. Document file structure for modular Redux (/slices, /store, /api).

Intermediate Questions

  1. Manually invalidate only the cache for a specific post (invalidateTags: (result, error, id) => [{ type: ‘Post’, id }]).
  2. Use dependent queries (fetch post → then fetch comments with the same ID).
  3. Show cache sharing when two components use the same query with identical params.
  4. Demonstrate using prefetch() from api.util to warm up cache before navigation.
  5. Add a query that fetches paginated data and caches each page separately.
  6. Cancel an ongoing request using the abort() signal from RTK Query.
  7. Persist RTK Query cache into localStorage.
  8. Add error boundary component that wraps all RTK Query fetched components.
  9. Use onError middleware to globally handle and log query errors.
  10. Implement optimistic update for liking a post (increment likes locally, rollback if error).
  11. Build UI that shows optimistic comment-added immediately, then confirm with server.
  12. Demonstrate handling network error with a retry option button in UI.
  13. Handle unauthorized API call (401) by dispatching logout from rejectWithValue.
  14. Show toast notifications on mutation success/failure.
  15. Split a large Redux store into multiple slices (auth, posts, comments, ui).
  16. Use combineReducers() with multiple slices in a scalable structure.
  17. Define selectors for memoized access to usersById.
  18. Create a normalized entity adapter with createEntityAdapter().
  19. Compare normalized vs denormalized state for performance.
  20. Modularize slice files into /features/auth/authSlice.js, /features/posts/postsSlice.js.

Advanced Questions

  1. Create a real-time chat with polling every 2 seconds and automatic invalidation when sending a message.
  2. Implement a cache invalidation strategy that only deletes stale comments after 60s of no usage.
  3. Build nested optimistic updates: Add a post optimistically, then optimistically add a comment before server returns data.
  4. Combine useQuery + useMutation to perform inline updates for partial cached objects.
  5. Implement global error handler middleware that retries failed queries up to 3 times.
  6. Refactor a monolithic Redux store into feature-based modular slices with RTK best practices.
  7. Build a normalized large-scale store managing authors, posts, comments with selectors & entity adapters.
  8. Create a scalable dashboard app architecture using slices + apiSlice + RTK Query.
  9. Implement lazy-loaded slices for code-splitting in a large app.
  10. Document and enforce best practices: (minimal state, normalized structure, selectors, and modular file organization) inside a project.