Redux Flashcards
How do you get the current state in redux?
store.getState();
You have three reducers(aReducer, bReducer, cReducer). How do you combine these and create finally a store?
In store.js import all the reducers and createStore and combineReducers like this:
import { createStore, combineReducers } from 'redux';
import { aReducer } from '../features/a/aSlice.js;
Then create a bundled reducers Object:
const reducers = {
aSlice: aReducer,
etc. ...
Than create the rootReducer
const rootReducer = combineReducers(reducers);
and from there create and export the store:
export const store = createStore(rootReducer);
Which data do you need to pass as props after importing the redux store into your index.js?
The current state of the store and dispatch to the <App></App>:
<App
state={store.getState()}
dispatch={store.dispatch}
/>
Where do you import the store in redux?
In the entry point. The index.js:
import { store } from './app/store.js'
How do you get the current state of the store in redux?
store.getState()
How do you listen to changes of the state of the store in redux in your index.js?
store.subscribe(render);
render is the function that renders the whole app component.
How do you dispatch an action in redux?
By calling dispatch() with the action and it’s passed values:
dispatch(action(propA, propB))
How do you import the configureStore from Redux Toolki?
import { configureStore } from '@reduxjs/toolkit'How do you setup an store in redux toolkit?
To set up a store in Redux Toolkit, you primarily use the configureStore function, which simplifies the process compared to the traditional Redux setup.
export configureStore({
reducer: {
todos: todosReducer,
filters: filtersReducer
}
})
What is createSlice in Redux Toolkit?
createSlice is a function that simplifies creating Redux logic by combining reducer, actions, and initialState in one place.
What is the purpose of the name field in createSlice?
- Organizes actions under a common namespace.
- Prevents naming conflicts between slices.
- Improves readability in debugging tools like Redux DevTools.
What are reducers in createSlice?
reducers is an object where each key is an action, and its value is a reducer function that updates the state based on the action.
const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; }
}
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
Write a sample createSlice configuration for a counter with actions to increment and decrement.
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; }
}
});How can you make actions generated by createSlice available?
You make actions available by exporting them from the slice file:
export const { increment, decrement } = counterSlice.actions;
This allows them to be imported and used in components:
import { increment } from './counterSlice';
Then, you can dispatch them when needed:
dispatch(increment());
In Redux/toolkit createAsyncThunk() accepts two arguments. In order, they are?
createAsyncThunk‘s arguments are an action type string and an asynchronous thunk function.
What is a thunk in redux?
A function returned by another function
Which two programming concepts does Redux Toolkit use internally for createAsyncThunk()?
Middleware and thunks
What is the purpose of middleware in Redux?
Redux middleware extends the store’s abilities and lets you write asynchronous logic that can interact with the store. Middleware is added to the store either through createStore() or configureStore().
How do you register a slice in the store in redux toolkit?
You register a slice in the store by adding its reducer to configureStore under the reducer key.
const store = configureStore({
reducer: {
counter: counterSlice.reducer
}
});
counterSlice is the Slice Object and .reducer is all the reducers in counterSlice.
What does a Reducer do?
A reducer is a function that takes the current state, processes an action, and returns a new state.
How does a component dispatch an Action?
Using dispatch(action), for example:
dispatch(increment()); dispatch(add(5));
What happens after dispatching an Action?
- The action is sent to the store.
- The store forwards it to the appropriate reducer.
- The reducer processes it and returns a new state.
- The UI updates automatically.
How does a component read the current state from the store in toolkit?
const count = useSelector((state) => state.counter.count);
How do you define actions with Redux Toolkit?
Actions are automatically created within createSlice():
const counterSlice = createSlice({
name: "counter",
initialState: { count: 0 },
reducers: {
increment: (state) => { state.count += 1; },
add: (state, action) => { state.count += action.payload; }
}
});
You can import and use them like this:
import { increment, add } from "./counterSlice";
dispatch(increment());
dispatch(add(5));
Explain the concept of thunk in Redux. How does it help in handling side effects?
A thunk is a middleware that allows action creators to return functions instead of plain action objects. This is useful for handling asynchronous logic (e.g., API calls) before dispatching actions to the reducer. The function receives dispatch and getState as arguments, allowing controlled updates to the state.
const fetchData = () => (dispatch, getState) => {
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => dispatch({ type: "DATA_LOADED", payload: data }));
};
What is the role of connect() from react-redux? How does it work?
The connect() function is a higher-order component (HOC) that connects a React component to the Redux store. It allows components to subscribe to Redux state and dispatch actions without directly accessing the store.
const mapStateToProps = (state) => ({ count: state.count });
const mapDispatchToProps = (dispatch) => ({ increment: () => dispatch({ type: "INCREMENT" }) });
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
How does the useSelector hook differ from connect() in accessing state in Redux?
- useSelector is a React Hook that allows functional components to access Redux state directly.
- connect() is a HOC used with class components (or functional components) to connect to Redux.
- useSelector has a simpler syntax and allows components to subscribe to only the specific slices of state they need, improving performance.
const count = useSelector(state => state.count);
Explain the concept of immutability in the context of Redux. Why is it important?
Immutability in Redux means that the state should never be modified directly; instead, new state objects are created whenever changes occur.
Why is it important?
- Ensures predictability of state changes.
- Enables time-travel debugging (Redux DevTools).
- Helps React detect state changes for efficient rendering.
return { ...state, value: 10 }; // ✅ Always return a new object
What are the differences between mapStateToProps and mapDispatchToProps?
- mapStateToProps(state) → Maps Redux state to component props.
- mapDispatchToProps(dispatch) → Maps dispatch functions (actions) to component props.
const mapStateToProps = (state) => ({ count: state.count });
const mapDispatchToProps = (dispatch) => ({ increment: () => dispatch({ type: "INCREMENT" }) });
Discuss the role of combineReducers in Redux. When and why would you use it?
combineReducers is used to split state management across multiple reducers. It allows different parts of the state to be managed independently.
const rootReducer = combineReducers({
user: userReducer,
posts: postsReducer,
});
👉 Use it when your app has multiple state slices managed by separate reducers.
What are Redux selectors and why are they useful in large applications?
Selectors are functions that extract specific pieces of state from the Redux store.
Why use them?
✔ Avoid code duplication
✔ Improve performance (with memoization using reselect)
✔ Make refactoring easier
const selectUser = (state) => state.user; const selectUserName = createSelector(selectUser, (user) => user.name);
What is the purpose of Redux DevTools extension, and how do you configure it?
Redux DevTools allows developers to track actions, inspect state changes, and time-travel debug.
Configuration:
~~~
import { composeWithDevTools } from “redux-devtools-extension”;
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
~~~
What are middleware functions in Redux? Can you give examples of commonly used middleware?
Middleware extends Redux by intercepting actions before they reach the reducer.
Common middleware:
- redux-thunk (handles async actions)
- redux-saga (alternative for complex async flows)
- logger (logs actions)
What is Redux and why is it used in React applications?
Redux is a **state management library* for JavaScript applications. It helps manage global state in a predictable way, making debugging and scaling easier.
What are the differences between Redux and the Context API?
- Redux → Better for complex state logic & debugging (Redux DevTools).
- Context API → Best for lightweight, simple state sharing (e.g., theme or auth state).
🔹 Use Redux for large applications with complex state logic.
🔹 Use Context API for small-scale state sharing.
What are the core principles of Redux?
- Single source of truth → One store for the entire state.
- State is read-only → Changes only happen via actions.
- Changes are made with pure functions → Reducers update state immutably.
Explain the basic components of Redux architecture.
- Store → Holds the state.
- Actions → Describe state changes.
- Reducers → Handle actions & return new state.
- Middleware → Intercepts actions (e.g., async logic).
What is the purpose of actions and reducers in Redux?
- Actions → Describe what should happen.
- Reducers → Define how the state changes in response to actions.
How does Redux manage the state of an application?
Redux maintains state in a single immutable object in the store, which is updated by dispatching actions handled by reducers.
What is the Redux store?
The store is the central container for the application state.
const store = createStore(rootReducer, applyMiddleware(thunk));
Why should we dispatch an action to update the state and not update the store directly?
Direct state mutations break Redux’s predictability, time-travel debugging, and performance optimizations. Actions ensure controlled state updates.
How does Redux handle asynchronous operations?
Redux uses middleware like redux-thunk or redux-saga to manage async actions like API calls.
What does .addCase() do in Redux Toolkit?
.addCase() is a method used in extraReducers to handle specific action types. It connects each action type (e.g., fetchProducts.pending, fetchProducts.fulfilled) with a function that updates the Redux state.
~~~
builder.addCase(fetchProducts.pending, (state) => {
state.loading = true;
});```
When do we use extraReducers instead of reducers?
extraReducers is used when we have asynchronous actions such as those generated by createAsyncThunk.
- reducers are used for synchronous actions (e.g., updating the state directly).
- extraReducers are for handling actions related to async operations, like pending, fulfilled, and rejected states from a createAsyncThunk.
Why do we need to export pizzaSlice.reducer from the pizzaSlice.js?
The reducer is needed by Redux to manage the store. It tells Redux how to update the state when an action is dispatched.
Example of using it in a store:
import { configureStore } from '@reduxjs/toolkit';
import pizzaReducer from './pizzaSlice';
const store = configureStore({
reducer: {
pizza: pizzaReducer,
},
});
Why do we need to export pizzaSlice.actions from the pizzaSlice.js?
pizzaSlice.actions contains action creators, which are functions that return action objects. These actions can then be dispatched to update the state.
Example of an action creator and dispatching it:
import { useDispatch } from 'react-redux';
import { pizza_order } from './pizzaSlice';
const Component = () => {
const dispatch = useDispatch();
return <button onClick={() => dispatch(pizza_order())}>Order Pizza 🍕</button>;
};
Why do we export both pizzaSlice.reducer and pizzaSlice.actions?
- pizzaSlice.reducer is needed for the Redux store to manage state.
- pizzaSlice.actions is needed for components to dispatch actions and trigger state changes.
What does the Provider component do in Redux Toolkit?
It makes the Redux store available to the entire app by wrapping the root component.
<Provider store = {store}>
<App />
</Provider>
How do you set up Provider in a React-Redux app?
- Create the store with configureStore().
- Wrap the app inside <Provider store={store}> in index.js or main.js.
What happens when clicking this button?
<button onClick={() => dispatch(pizza_order())}>Order Pizza</button>
1️⃣ Button click triggers onClick.
2️⃣ Arrow function calls dispatch(pizza_order()).
3️⃣ dispatch sends an action to Redux.
4️⃣ The reducer updates state based on “ORDER_PIZZA”.
5️⃣ React re-renders UI if needed.
What is Redux Toolkit and how does it differ from plain Redux?
Redux Toolkit is an official, opinionated library that simplifies Redux development by providing preconfigured tools (like createSlice and configureStore) to reduce boilerplate and enforce best practices. Unlike plain Redux, it minimizes manual setup and error-prone patterns.
Why is Redux Toolkit recommended as the standard way to write Redux logic?
It streamlines development by reducing boilerplate, enforces best practices, integrates tools like Immer for immutability, and offers utilities (e.g., createSlice, createAsyncThunk) that simplify asynchronous logic and store configuration.
What does createSlice do, and how does it simplify Redux setup?
createSlice combines the declaration of action types, action creators, and reducers into one cohesive unit (a slice). It auto-generates action creators and action types based on provided reducer functions, dramatically reducing boilerplate.
How does createAsyncThunk work, and when should you use it?
createAsyncThunk handles asynchronous operations by dispatching automatically generated pending, fulfilled, and rejected actions based on a promise’s lifecycle. Use it for API calls or async logic to manage loading and error states seamlessly.
What is configureStore, and how does it differ from Redux’s createStore?
configureStore simplifies store creation by automatically adding middleware (like redux-thunk and development checks), integrating Redux DevTools, and reducing manual setup. In contrast, createStore in plain Redux requires manual configuration of middleware and enhancers.
How does Redux Toolkit handle immutability in reducers?
It uses Immer under the hood so that you can write “mutating” code (e.g., state.value++) which is automatically converted into immutable updates, simplifying state management.
What is Immer, and how is it used in Redux Toolkit?
Immer is a library that enables you to write code that “mutates” state while actually producing immutable updates. Redux Toolkit integrates Immer by default in createSlice reducers to simplify immutable update logic.
How does Redux Toolkit reduce boilerplate compared to traditional Redux?
It consolidates action types, action creators, and reducers into a single slice; automates store configuration with default middleware; and provides utilities like createAsyncThunk that manage async states, significantly cutting down repetitive code.
What is the builder syntax in extraReducers and why is it useful?
The builder syntax is a callback pattern in extraReducers that allows you to add cases for different actions (e.g., pending, fulfilled, rejected from createAsyncThunk) in a clear and maintainable way, avoiding the need for manual switch-case statements.
How can you customize middleware in configureStore?
You can pass a middleware array to configureStore via its middleware option, using getDefaultMiddleware to start with the defaults and then chaining methods like .concat() to add custom middleware or removing defaults as needed.
How does Redux Toolkit handle errors in async actions?
With createAsyncThunk, errors automatically trigger a rejected action. The error details are stored in action.error, allowing reducers to capture and update error states without additional error-handling code.
What is the structure of a typical slice created with createSlice?
A typical slice includes:
- name: A unique identifier for the slice
- initialState: The default state for that slice
- reducers: Synchronous reducer functions (which auto-generate actions)
- extraReducers: Handlers for external actions (e.g., those from createAsyncThunk)
How do you handle loading states in Redux Toolkit?
Loading states are commonly managed in extraReducers when using createAsyncThunk. Set a loading flag to true on the pending action, and then set it to false upon fulfilled or rejected actions to indicate whether data is being fetched.
How do you test async actions created with createAsyncThunk?
By mocking API calls and dispatching the thunk in a test environment, you can verify that the correct sequence of actions (pending, fulfilled, or rejected) is dispatched and that the state updates as expected.
What common middleware does Redux Toolkit include by default?
Redux Toolkit’s configureStore includes middleware like redux-thunk for async logic, a serializable state invariant middleware, and immutability checks in development mode, ensuring robust defaults.
What is getDefaultMiddleware in configureStore, and how can it be customized?
getDefaultMiddleware returns an array of default middleware used by configureStore. It can be customized by chaining methods (e.g., .concat() to add middleware or .filter() to remove specific middleware) to tailor the middleware pipeline.
