Redux/Redux Toolkit Assignment – 2

Basic Questions

  1. Install Redux Toolkit in a React project using npm install @reduxjs/toolkit react-redux.
  2. Create and export a Redux store using configureStore().
  3. Compare configureStore() with vanilla createStore() in Redux.
  4. Add a counter reducer to the store.
  5. Log the store state before and after a dispatch.
  6. Create a slice named counterSlice with initial state {value: 0}.
  7. Add a reducer inside the slice for increment to increase value by 1.
  8. Add a reducer for decrement.
  9. Add a reducer for reset to reset count to 0.
  10. Export counterSlice.reducer and use it in configureStore().
  11. Dispatch increment() action from the slice and log the state.
  12. Dispatch decrement() action and log the state.
  13. Dispatch reset() and verify state reset.
  14. Create multiple reducers inside a single slice (e.g., incrementByAmount).
  15. Access generated action creators from the slice (counterSlice.actions).
  16. Enable Redux DevTools in configureStore.
  17. Write a dummy slice called themeSlice with states light and dark.
  18. Toggle theme using toggleTheme() reducer.
  19. Create a slice called authSlice with isLoggedIn: false.
  20. Write reducers login() and logout() in authSlice and test dispatch.

Intermediate Questions

  1. Create a slice that manages a list of todos (addTodo, removeTodo).
  2. Add a reducer that marks a todo as completed.
  3. Create a userSlice with name and email fields, and write reducers for updateName and updateEmail.
  4. Use counterSlice to increment by a dynamic payload value.
  5. Build a slice that manages notifications (addNotification, clearNotifications).
  6. Use immer (built into RTK) by updating nested state immutably.
  7. Combine multiple slices (counterSlice, userSlice) in the same store.
  8. Log dispatched action types from store.subscribe().
  9. Create an async thunk fetchUsers that fetches from https://jsonplaceholder.typicode.com/users.
  10. Add extraReducers to handle fetchUsers.pending.
  11. Add extraReducers to handle fetchUsers.fulfilled.
  12. Add extraReducers to handle fetchUsers.rejected.
  13. Track loading, success, and error states inside a usersSlice.
  14. Dispatch fetchUsers() and console.log state updates.
  15. Show loading spinner in UI when fetchUsers is pending.
  16. Display error message in UI if fetchUsers is rejected.
  17. Create a productsSlice that fetches products from a fake API using createAsyncThunk.
  18. Build cartSlice to add, remove, and clear items.
  19. Display total cart quantity in a component.
  20. Use Redux DevTools to inspect async actions step by step.

Advanced Questions

  1. Create a postsSlice with fetchPosts async thunk from an API.
  2. Handle loading, error, and success states with clear UI indicators.
  3. Add addNewPost async thunk to create a new post on the server.
  4. Chain multiple thunks → fetch users, then fetch posts by a specific user.
  5. Write a middleware-like slice that logs when any async action is pending.
  6. Show difference between Redux Thunk and createAsyncThunk with example code.
  7. Build a mini blog app with postsSlice and usersSlice, fetching and displaying from API.
  8. Implement a login system using authSlice + async API call (loginUser).
  9. Create an e-commerce app slice structure (products, cart, orders), each using async thunks.
  10. Develop a dashboard that loads multiple API endpoints (stats, users, notifications) using createAsyncThunk.