ReactJS State Management with Redux Syllabus

How do you connect a Redux store to a React application?

Wrap the root of your component tree in the <Provider> component from react-redux and pass the store as a prop: <Provider store={store}><App /></Provider>. This makes the store available to all nested components via context.

What does the react-redux <Provider> component do?

<Provider> uses React context to make the Redux store accessible to every component in the wrapped tree, so hooks like useSelector and useDispatch (and the legacy connect) can access the store without manually passing it down as props.

What is the useSelector hook and how is it used?

useSelector is a react-redux hook that lets a component read a value from the Redux store state. You pass it a selector function: const count = useSelector(state => state.counter.value). The component re-renders whenever the selected value changes (compared by reference equality by default).

What is the useDispatch hook and how is it used?

useDispatch is a react-redux hook that returns a reference to the store's dispatch function. You use it to dispatch actions: const dispatch = useDispatch(); dispatch(increment()). It replaces the need for mapDispatchToProps in function components.

What is the connect() function in react-redux?

connect() is the classic higher-order component (HOC) API that links a React component to the Redux store. It takes mapStateToProps and mapDispatchToProps and injects state slices and dispatch-bound action creators as props. In modern code the hooks (useSelector/useDispatch) are preferred.

What are mapStateToProps and mapDispatchToProps in connect()?

mapStateToProps(state) selects pieces of store state and returns them as props to the component. mapDispatchToProps(dispatch) creates functions that dispatch actions and passes them as props, letting the component trigger state changes without directly touching dispatch.

What is an action in Redux?

An action is a plain JavaScript object that describes an event or intention to change state. It must have a 'type' property (a string identifier) and may carry additional data, conventionally in a 'payload' field. Example: { type: 'counter/increment', payload: 1 }.

What is the required property of every Redux action, and what convention is used for it?

Every action must have a 'type' property, typically a descriptive string. The convention is to use a 'domain/eventName' format (e.g., 'todos/todoAdded') so the type is readable and namespaced, aiding debugging and DevTools.

What is an action creator?

An action creator is a function that returns an action object. Instead of writing action objects by hand, you call the creator: function increment(amount) { return { type: 'counter/increment', payload: amount }; }. This centralizes action shape and reduces errors.

What is the 'payload' convention in a Redux action?

By the Flux Standard Action (FSA) convention, any data an action carries is placed in a 'payload' field, while error info goes in 'error' and extra info in 'meta'. This keeps action structure consistent: { type, payload, error, meta }.

What is a reducer in Redux?

A reducer is a pure function with the signature (state, action) => newState. It takes the current state and an action, and returns the next state. It decides how the state should change in response to each action type, typically using a switch statement on action.type.

What is the function signature of a Redux reducer?

(previousState, action) => nextState. It receives the current state and the dispatched action and must return the new state (or the unchanged state if the action does not apply). It must not mutate previousState.

Why must a reducer return the initial state when given undefined state?

When the store is first created, Redux calls each reducer with state = undefined to populate the initial state tree. Reducers use a default parameter (e.g., state = initialState) to return their initial value; otherwise the store state would be undefined.

Show the typical structure of a reducer using a switch statement.

function counter(state = { value: 0 }, action) { switch (action.type) { case 'increment': return { ...state, value: state.value + 1 }; case 'decrement': return { ...state, value: state.value - 1 }; default: return state; } }

Why must a reducer return the current state in its 'default' case?

Because every dispatched action is passed to every reducer. If a reducer does not handle a given action type, it must return the existing state unchanged in the default case; otherwise it would return undefined and wipe out that slice of state.

How do reducers update state immutably instead of mutating it?

They create and return a new object/array copy with the changes applied, commonly using the spread operator ({ ...state, field: newValue }) or array methods that return new arrays (map, filter, concat). They never assign directly to the existing state object.

What is combineReducers and why is it used?

combineReducers is a Redux helper that merges multiple slice reducers into a single root reducer. Each key in the object passed to it becomes a key in the state tree, managed by its corresponding reducer. It is used to split state-handling logic by domain.

Show how combineReducers is used.

import { combineReducers } from 'redux'; const rootReducer = combineReducers({ users: usersReducer, posts: postsReducer, cart: cartReducer }); The resulting state shape is { users: ..., posts: ..., cart: ... }, each managed independently.

In combineReducers, what determines the shape of the state tree?

The keys of the object passed to combineReducers determine the state tree shape. Each key becomes a top-level property of the state, and the reducer at that key manages only that slice, receiving only state[key] as its state argument.

In combineReducers, what slice of state does each individual reducer receive?

Each reducer receives only its own slice of the state (the value at its key), not the entire state tree. For example, the usersReducer at key 'users' only ever sees and returns state.users.

What is middleware in Redux?

Middleware is a function that sits between dispatching an action and the moment it reaches the reducer. It provides an extension point to intercept, inspect, delay, transform, or dispatch additional actions - commonly used for logging, crash reporting, and asynchronous side effects.

What is the curried function signature of Redux middleware?

store => next => action => { ... }. It receives the store (with getState/dispatch), returns a function taking 'next' (the next middleware's dispatch), which returns a function taking the 'action'. Middleware typically calls next(action) to pass the action along.

How do you apply middleware to a Redux store in classic Redux?

Use applyMiddleware as a store enhancer: import { createStore, applyMiddleware } from 'redux'; const store = createStore(rootReducer, applyMiddleware(thunk, logger)). Middleware runs in the order listed. In Redux Toolkit, configureStore adds middleware automatically.

Why is middleware needed for asynchronous logic in Redux?

Reducers must be pure and synchronous, so they cannot perform async work like API calls. Middleware (e.g., thunk or saga) intercepts actions before they reach reducers, letting you run async side effects and dispatch resulting actions when the async work completes.

What is Redux Thunk?

Redux Thunk is middleware that lets action creators return a function (a 'thunk') instead of a plain action object. That function receives dispatch and getState, allowing you to perform asynchronous logic (like API calls) and dispatch actions conditionally or after delays.

What is a 'thunk' in the context of Redux Thunk?

A thunk is a function that wraps an expression or logic to delay its execution. In Redux, it is a function returned by an action creator with the form (dispatch, getState) => { ... }, inside which you can run async code and dispatch real actions.

Write a typical async action creator using Redux Thunk.

function fetchUser(id) { return async (dispatch) => { dispatch({ type: 'user/loading' }); try { const res = await api.getUser(id); dispatch({ type: 'user/loaded', payload: res }); } catch (e) { dispatch({ type: 'user/error', error: e.message }); } }; }

What is Redux Saga?

Redux Saga is middleware for managing side effects (especially async data fetching and complex flows) using ES6 generator functions. Sagas 'watch' for dispatched actions and run worker generators that yield declarative 'effects' (like call, put, takeEvery) to orchestrate side effects.

What JavaScript feature does Redux Saga rely on, and what are common saga effects?

Redux Saga relies on ES6 generator functions (function*, yield). Common effects include call (invoke a function/promise), put (dispatch an action), take/takeEvery/takeLatest (listen for actions), select (read state), fork (non-blocking task), and all (run effects in parallel).

Compare Redux Thunk and Redux Saga: when would you choose each?

Thunk is simpler, uses functions/promises, and is ideal for straightforward async logic and small-to-medium apps. Saga uses generators, is more verbose but more powerful for complex asynchronous flows, cancellation, debouncing, and orchestrating many concurrent side effects; it is also easier to test declaratively.

In Redux Saga, what is the difference between takeEvery and takeLatest?

takeEvery starts a new worker saga on every matching dispatched action, allowing concurrent handlers. takeLatest starts a worker on each matching action but automatically cancels any previous still-running worker for that action type, keeping only the response to the most recent action (useful for search/autocomplete).