Redux/Redux Toolkit Assignment – 3
Basic Questions
- Create a Redux Toolkit store and confirm that default middleware (Redux Thunk, serializability checks) is applied.
- Enable logging middleware using getDefaultMiddleware() in configureStore.
- Write a console log inside custom middleware that logs all dispatched actions.
- Create middleware that logs state before and after action is dispatched.
- Make middleware that only logs actions of type USER_LOGIN.
- Write middleware that blocks any action with type DELETE_USER.
- Update middleware to log only async thunk lifecycle actions (pending, fulfilled, rejected).
- Show how applying multiple middlewares works (log → validate → reducer).
- Inspect middleware array using DevTools to confirm middleware setup.
- Add error-catching middleware that logs errors in reducers/actions.
- Take an old Redux createStore() example and rewrite using configureStore().
- Convert a plain reducer function into a slice with createSlice().
- Replace manually written action creators with auto-generated ones from slice.
- Replace switch-case reducer logic with object methods in slice.
- Migrate a simple counter reducer written in plain Redux into RTK slice.
- Use combineReducers() in plain Redux and replace with configureStore() in RTK.
- Remove boilerplate action constants when moving to RTK slices.
- Write the same store with plain Redux and RTK side by side to compare.
- Switch a plain Redux dispatch({ type: “INCREMENT” }) into slice dispatch(counterActions.increment()).
- Refactor a Redux app to use Provider from react-redux with RTK.
Intermediate Questions
- Write a middleware that times the duration of each reducer execution.
- Create middleware that prevents duplicate API calls by checking a loading flag.
- Build middleware that saves state updates into localStorage.
- Modify middleware to rehydrate state from localStorage on app reload.
- Write middleware that delays an action by 2 seconds before passing it to reducers.
- Create middleware that converts all dispatched action types to uppercase in logs.
- Build a notification middleware that dispatches an extra action whenever ADD_TODO occurs.
- Combine custom logging middleware with Redux Toolkit’s built-in serializable check.
- Replace a manual logger setup with the redux-logger package as middleware.
- Create a middleware that cancels an action if the payload is invalid.
- Refactor a Redux todo reducer into todoSlice with addTodo/removeTodo.
- Replace a Redux async thunk written manually with RTK’s createAsyncThunk.
- Convert a Redux app with three reducers (auth, products, cart) into RTK with slices.
- Remove unnecessary boilerplate (mapDispatchToProps) after migrating to RTK hooks (useDispatch, useSelector).
- Replace bindActionCreators usage by directly importing auto-generated slice actions.
- Migrate a plain Redux middleware setup to middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myMiddleware).
- Refactor a project to remove action constants and use slice-generated ones.
- Show how RTK reduces lines of code in action + reducer compared to plain Redux.
- Update a connected component (connect(mapStateToProps)) to use hooks after RTK migration.
- Document differences in debugging experience after migrating from Redux → RTK.
Advanced Questions
- Create a middleware that caches API responses: On duplicate request, return cached data instead of fetching.
- Write middleware that automatically dispatches a LOGOUT action if a token expires (timeout).
- Build middleware that tracks user actions and saves them to analytics (console log or fake API call).
- Implement middleware that debounces an action (SEARCH_QUERY) to prevent excessive dispatches.
- Create chained middleware workflow: log request → async API → cache response → error handler.
- Fully migrate a Redux authentication app from old reducers + actions → RTK authSlice + createAsyncThunk.
- Refactor a large Redux shopping cart app (with multiple reducers) into slices with configureStore.
- Rewrite API fetching logic in a Redux news app from manual thunks → RTK createAsyncThunk.
- Migrate a dashboard app using plain Redux DevTools configuration to RTK DevTools integration.
- Document and refactor a legacy Redux project into RTK, focusing on removing boilerplate while keeping functionality same.