Redux

Question 1

How do you get the current state in redux?

Answer 1

store.getState();

Question 2

You have three reducers(aReducer, bReducer, cReducer). How do you combine these and create finally a store?

Answer 2

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);

Question 3

Which data do you need to pass as props after importing the redux store into your index.js?

Answer 3

The current state of the store and dispatch to the <App></App>:

<App 
      state={store.getState()}
      dispatch={store.dispatch}
    />

Question 4

Where do you import the store in redux?

Answer 4

In the entry point. The index.js:

import { store } from './app/store.js'

Question 5

How do you get the current state of the store in redux?

Answer 5

store.getState()

Question 6

How do you listen to changes of the state of the store in redux in your index.js?

Answer 6

store.subscribe(render);

render is the function that renders the whole app component.

Question 7

How do you dispatch an action in redux?

Answer 7

By calling dispatch() with the action and it’s passed values:

dispatch(action(propA, propB))

Question 8

How do you import the configureStore from Redux Toolki?

Answer 8

import { configureStore } from '@reduxjs/toolkit'

Question 9

How do you setup an store in redux toolkit?

Answer 9

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
 }
})

Question 10

What is createSlice in Redux Toolkit?

Answer 10

createSlice is a function that simplifies creating Redux logic by combining reducer, actions, and initialState in one place.

Question 11

What is the purpose of the name field in createSlice?

Answer 11

• Organizes actions under a common namespace.
• Prevents naming conflicts between slices.
• Improves readability in debugging tools like Redux DevTools.

Question 12

What are reducers in createSlice?

Answer 12

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;

Question 13

Write a sample createSlice configuration for a counter with actions to increment and decrement.

Answer 13

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; }
  }
});

Question 14

How can you make actions generated by createSlice available?

Answer 14

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());

Question 15

In Redux/toolkit createAsyncThunk() accepts two arguments. In order, they are?

Answer 15

createAsyncThunk‘s arguments are an action type string and an asynchronous thunk function.

Question 16

What is a thunk in redux?

Answer 16

A function returned by another function

Question 17

Which two programming concepts does Redux Toolkit use internally for createAsyncThunk()?

Answer 17

Middleware and thunks

Question 18

What is the purpose of middleware in Redux?

Answer 18

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().

Question 19

How do you register a slice in the store in redux toolkit?

Answer 19

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.

Question 20

What does a Reducer do?

Answer 20

A reducer is a function that takes the current state, processes an action, and returns a new state.

Question 21

How does a component dispatch an Action?

Answer 21

Using dispatch(action), for example:

dispatch(increment());
dispatch(add(5));

Question 22

What happens after dispatching an Action?

Answer 22

1. The action is sent to the store.
2. The store forwards it to the appropriate reducer.
3. The reducer processes it and returns a new state.
4. The UI updates automatically.

Question 23

How does a component read the current state from the store in toolkit?

Answer 23

const count = useSelector((state) => state.counter.count);

Question 24

How do you define actions with Redux Toolkit?

Answer 24

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));

Question 25

Explain the concept of thunk in Redux. How does it help in handling side effects?

Answer 25

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 }));
};

Question 26

What is the role of connect() from react-redux? How does it work?

Answer 26

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);

Question 27

How does the useSelector hook differ from connect() in accessing state in Redux?

Answer 27

• 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);

Question 28

Explain the concept of immutability in the context of Redux. Why is it important?

Answer 28

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

Question 29

What are the differences between mapStateToProps and mapDispatchToProps?

Answer 29

• 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" }) });

Question 30

Discuss the role of combineReducers in Redux. When and why would you use it?

Answer 30

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.

Question 31

What are Redux selectors and why are they useful in large applications?

Answer 31

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);

Question 32

What is the purpose of Redux DevTools extension, and how do you configure it?

Answer 32

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)));
~~~

Question 33

What are middleware functions in Redux? Can you give examples of commonly used middleware?

Answer 33

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)

Question 34

What is Redux and why is it used in React applications?

Answer 34

Redux is a **state management library* for JavaScript applications. It helps manage global state in a predictable way, making debugging and scaling easier.

Question 35

What are the differences between Redux and the Context API?

Answer 35

• 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.

Question 36

What are the core principles of Redux?

Answer 36

• 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.

Question 37

Explain the basic components of Redux architecture.

Answer 37

1. Store → Holds the state.
2. Actions → Describe state changes.
3. Reducers → Handle actions & return new state.
4. Middleware → Intercepts actions (e.g., async logic).

Question 38

What is the purpose of actions and reducers in Redux?

Answer 38

• Actions → Describe what should happen.
• Reducers → Define how the state changes in response to actions.

Question 39

How does Redux manage the state of an application?

Answer 39

Redux maintains state in a single immutable object in the store, which is updated by dispatching actions handled by reducers.

Question 40

What is the Redux store?

Answer 40

The store is the central container for the application state.

const store = createStore(rootReducer, applyMiddleware(thunk));

Question 41

Why should we dispatch an action to update the state and not update the store directly?

Answer 41

Direct state mutations break Redux’s predictability, time-travel debugging, and performance optimizations. Actions ensure controlled state updates.

Question 42

How does Redux handle asynchronous operations?

Answer 42

Redux uses middleware like redux-thunk or redux-saga to manage async actions like API calls.