Redux/Redux Toolkit Assignment – 4

Basic Questions

  1. Install @reduxjs/toolkit and react-redux.
  2. Install RTK Query as part of Redux Toolkit (npm install @reduxjs/toolkit).
  3. Explain in code why client-state (Redux) ≠ server-state (API data).
  4. Set up a base Redux Toolkit store using configureStore().
  5. Add the api.middleware from RTK Query to the store.
  6. Create a basic API slice using createApi() with a fakeBaseQuery.
  7. Define a baseUrl in fetchBaseQuery.
  8. Create the first endpoint getPosts in createApi().
  9. Export the auto-generated hook useGetPostsQuery.
  10. Use <Provider> with store in a React app.
  11. Use useGetPostsQuery() inside a React component and display data.
  12. Display a loading message while isLoading is true.
  13. Display an error message when isError is true.
  14. Add type safety by defining response shape for API endpoint.
  15. Show skeleton/loading placeholder while fetching API data.
  16. Define a createPost mutation endpoint using useCreatePostMutation.
  17. Call createPost() on form submit with JSON payload {title, body}.
  18. Create a delete mutation endpoint deletePost.
  19. Use updatePost mutation (PUT) to edit a record.
  20. Show mutation states (isLoading, isSuccess, isError) in UI.

Intermediate Questions

  1. Create an apiSlice with multiple endpoints: getUsers, getPosts, getComments.
  2. Add caching to queries so repeated requests reuse cached data.
  3. Invalidate getPosts cache when createPost mutation is successful.
  4. Use refetch to manually refetch a query response.
  5. Add tags to an endpoint for smart cache invalidation.
  6. Show difference between client state update (Redux slice) vs server-state update (RTK Query).
  7. Handle multiple parallel queries (useGetPostsQuery + useGetUsersQuery).
  8. Stop polling duplicate requests by using cache.
  9. Display userinfo fetched with useGetUserQuery(id) dynamically by prop.
  10. Use polling with query to refresh every 5 seconds.
  11. Trigger a query on button click using skip option.
  12. Show how to prefetch data using usePrefetch().
  13. Fetch paginated API results using query params.
  14. Handle query parameters dynamically in useGetPostsQuery({page}).
  15. Fetch dependent data: getPosts then fetch comments of first post.
  16. Use useCreateUserMutation and update UI immediately on success.
  17. Show optimistic updates: update UI before mutation success response.
  18. Add error handling UI for failed deletePost mutation.
  19. Chain two actions: create a post → invalidate cache → refetch list.
  20. Store mutation result response to local Redux slice for offline support.

Advanced Questions

  1. Build a blog app that fetches posts (GET), adds new post (POST), edits (PUT), and deletes (DELETE) using RTK Query.
  2. Add infinite scrolling with paginated API using useGetPostsQuery({page}).
  3. Implement real-time polling of data every 3 seconds for live updates (e.g., live comments feed).
  4. Create a User Profile Page with separate queries (getUser, getUserPosts, getUserComments).
  5. Handle global error states with an RTK Query onError handler.
  6. Add a custom baseQuery with re-authentication flow (retry when token expires).
  7. Integrate RTK Query inside a Redux slice to combine client state + API state.
  8. Use invalidateTags smartly across multiple endpoints (Posts, Users, Comments).
  9. Show parallel + conditional queries: fetch posts only if user exists.
  10. Build a mini E-commerce app with product fetch query + cart mutations (addToCart, removeFromCart) handled via RTK Query.