Redux/Redux Toolkit Assignment – 6

Basic Questions

  1. Identify and fix an anti-pattern: Mutating state directly inside a reducer.
  2. Practice replacing useSelector() that returns the entire state with a selector for only required slice.
  3. Avoid inline anonymous functions in mapDispatchToProps → refactor to action creators.
  4. Fix an anti-pattern: Storing a whole API response object in Redux vs storing only normalized data.
  5. Demonstrate why you shouldn’t duplicate the same data in two slices.
  6. Avoid side effects (like API calls) directly inside reducers.
  7. Replace constants + manual action types with RTK slice auto-generated actions.
  8. Create an RTK Query endpoint to fetch a list of users.
  9. Use useAddUserMutation() to submit a new user to the backend.
  10. Connect a frontend Redux cartSlice with a backend cart API.
  11. Ensure server-side state (getPosts) syncs with cache using invalidateTags.
  12. Handle errors from the backend gracefully in UI (isError + error.message).
  13. Write a unit test for a counterSlice reducer increment.
  14. Write a unit test for decrement action.
  15. Test that unknown action returns the current state in reducer.
  16. Test a Redux action creator returns the correct type + payload.
  17. Mock a simple RTK Query endpoint response using msw or manual mock.
  18. Compare rendering behavior with useSelector(state => state) vs selective property.
  19. Wrap a todo list component with React.memo and show fewer re-renders.
  20. Demonstrate useMemo to memoize an expensive calculation based on Redux state.

Intermediate Questions

  1. Refactor a reducer that mutates nested objects into an immutable approach with immer.
  2. Convert a slice storing duplicated posts and comments into normalized entities using createEntityAdapter.
  3. Demonstrate why calling API requests inside useEffect+dispatch is an anti-pattern → replace with RTK Query.
  4. Refactor a state shape with redundancy into minimal + normalized state.
  5. Use selectors to extract data instead of mapping entire slice in every component.
  6. Show side-effect anti-pattern (API call inside reducer) and fix with createAsyncThunk.
  7. Connect Redux auth state with backend API for login/logout via RTK Query mutation.
  8. Add token-based authentication: Save access token in Redux, sync refresh logic from API.
  9. Implement a product list UI using RTK Query (useGetProductsQuery).
  10. Update an item stock with useUpdateProductMutation.
  11. Sync local cart items Redux slice with backend database after checkout.
  12. Build optimistic UI update for deleting a comment, rollback if API fails.
  13. Test multiple reducers combined using configureStore.
  14. Mock a backend API with msw (Mock Service Worker) for RTK Query.
  15. Write a test that ensures caching prevents duplicate API calls.
  16. Test loading/error states from a useGetUsersQuery hook using React Testing Library.
  17. Unit test an async thunk with mocked API (fulfilled & rejected cases).
  18. Create a memoized selector using createSelector for filtering todos.
  19. Use useCallback for passing stable callbacks to child components connected to Redux.
  20. Identify and prevent unnecessary component re-renders with profiler before & after optimization.

Advanced Questions

  1. Audit a Redux project for anti-patterns: (duplicate state, API calls in reducers, overly large states). Fix each problem with RTK best practices.
  2. Refactor a project that directly stores full API responses into normalized slices with createEntityAdapter.
  3. Identify performance pitfalls in selectors (returning new object each call), optimize with createSelector.
  4. Build a full CRUD posts module with getPosts, addPost, updatePost, deletePost synced to backend API.
  5. Implement JWT authentication flow (login, token storage, protected queries/mutations).
  6. Combine local client slice (uiSlice) with server-state slice (apiSlice) in one scalable store.
  7. Write end-to-end tests for an RTK Query-based feature with mock API responses.
  8. Build a scalable test suite: unit test reducers, action creators, thunks, and RTK Query hooks.
  9. Optimize a large list rendering with React.memo, useMemo, and cache selectors → measure with React Profiler.
  10. Migrate a large Redux project using bad patterns into best practice state architecture with normalized slices, API integration, and full test coverage.