ReactJS State Management with Redux Syllabus

State Management with Redux syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for State Management with Redux in ReactJS, not a summary of it.

1. 1

   Introduction to Redux

   3 topics

   • What is Redux?
   • Core Principles
   • Redux vs Context API
2. 2

   Setting Up Redux

   3 topics

   • Installing Redux and React-Redux
   • Creating a Store
   • Connecting Redux to React
3. 3

   Redux Actions and Reducers

   3 topics

   • Defining Actions
   • Creating Reducers
   • Combining Reducers
4. 4

   Redux Middleware

   3 topics

   • What is Middleware?
   • Using Redux Thunk
   • Using Redux Saga

State Management with Redux flashcards for ReactJS

20 of 51 cards from the State Management with Redux deck — real questions with worked answers.

1. What is Redux?

   Redux is a predictable state-management library for JavaScript applications. It stores the entire application state in a single centralized store (a JavaScript object tree) and lets you update that state in a predictable way using actions and reducers. It is UI-agnostic but most commonly paired with React.

2. What problem does Redux primarily solve in large applications?

   It solves the problem of managing shared/global state across many components. Instead of passing props down through many levels ('prop drilling') or scattering state across components, Redux centralizes state so any component can read or update it predictably.

3. What are the three core principles of Redux?

   1) Single source of truth - the whole state lives in one store. 2) State is read-only - the only way to change state is to dispatch an action. 3) Changes are made with pure functions - reducers are pure functions that take the previous state and an action and return the next state.

4. What does the Redux principle 'Single source of truth' mean?

   The entire state of the application is stored in one object tree inside a single store. This makes it easier to debug, inspect, persist, and share state across the app since there is only one authoritative source.

5. What does the Redux principle 'State is read-only' mean?

   You can never mutate the state directly. The only way to trigger a state change is by dispatching an action - a plain object describing what happened. This ensures all changes are centralized and happen one at a time in a strict order.

6. What does the Redux principle 'Changes are made with pure functions' mean?

   Reducers, which specify how state transforms in response to actions, must be pure functions: given the same inputs (state and action) they always return the same output and produce no side effects. They must return a new state object rather than mutating the existing one.

7. What is a pure function, and why must reducers be pure?

   A pure function always returns the same output for the same input and has no side effects (no API calls, no mutations, no randomness). Reducers must be pure so state changes are predictable, testable, time-travel debuggable, and so React can reliably detect changes via reference equality.

8. What are the four main building blocks of the Redux data flow?

   Store (holds state), Actions (plain objects describing what happened), Reducers (pure functions computing the next state), and Dispatch (the method used to send actions to the store).

9. Describe the one-way (unidirectional) data flow in Redux.

   1) The UI dispatches an action. 2) The store runs the root reducer with the current state and the action. 3) The reducer returns a new state. 4) The store saves the new state and notifies subscribers. 5) The UI re-renders based on the new state. Data always flows in one direction.

10. Compare Redux and the Context API: what is Context API primarily designed for?

    The Context API is a built-in React feature designed to avoid prop drilling by sharing values (like theme, locale, or current user) across the component tree. It is a dependency-injection/data-passing mechanism, not a full state-management system.

11. What are the key differences between Redux and the Context API?

    Context is built into React and best for low-frequency, simple shared data; it has no built-in tooling. Redux is a dedicated library with a single store, strict update patterns, middleware, DevTools with time-travel, and better performance optimization for large, frequently-updated global state.

12. When should you prefer the Context API over Redux?

    Prefer Context for small apps or for rarely-changing global values (theme, authenticated user, language) where you don't need middleware, DevTools, or complex update logic, and where re-render performance is not a concern.

13. Why can the Context API cause performance issues that Redux avoids?

    When a Context value changes, every component consuming that context re-renders, even if it only uses part of the value. Redux with react-redux uses selectors and subscriptions so only components whose selected slice of state changed re-render.

14. What two packages do you install to use Redux with React, and what is the modern recommended package?

    Classically you install 'redux' and 'react-redux'. The modern recommended approach is to install '@reduxjs/toolkit' (Redux Toolkit) together with 'react-redux'. Redux Toolkit includes the core Redux library plus utilities.

15. What npm command installs Redux and React-Redux the classic way?

    npm install redux react-redux (or with yarn: yarn add redux react-redux). The modern recommendation is: npm install @reduxjs/toolkit react-redux.

16. What is the role of the 'react-redux' package (as opposed to 'redux')?

    'redux' is the framework-agnostic core (store, reducers, dispatch). 'react-redux' is the official React binding layer that connects the store to React components via the <Provider> component and hooks like useSelector and useDispatch.

17. What is a Redux store and what are its main responsibilities?

    The store is the object that holds the application state tree. Its responsibilities: hold state via getState(), allow updates via dispatch(action), register listeners via subscribe(listener), and handle unregistering of listeners. There is exactly one store per Redux app.

18. How do you create a store with classic Redux?

    Import createStore from redux and pass it the root reducer: const store = createStore(rootReducer). You can optionally pass a preloaded initial state and enhancers/middleware. (Note: createStore is now deprecated in favor of configureStore.)

19. How do you create a store using Redux Toolkit, and why is it preferred?

    Use configureStore from @reduxjs/toolkit: const store = configureStore({ reducer: rootReducer }). It is preferred because it automatically combines reducers, adds redux-thunk, enables Redux DevTools, and includes checks for immutability and serializability out of the box.

20. What are the four core methods of a Redux store?

    getState() - returns the current state; dispatch(action) - sends an action to change state; subscribe(listener) - registers a callback run on every state change and returns an unsubscribe function; replaceReducer(nextReducer) - swaps the current reducer (used for code splitting / hot reloading).

See more State Management with Redux flashcards →

Planning State Management with Redux for ReactJS

State Management with Redux (ReactJS) FAQ