Redux Interview Questions and Answers for 2025

A Generator function gives us an iterator, which we can use to pause the function midway, do an action, and then resume it whenever we like. A Generator function can be interrupted as many times as desired and resumed later unlike a standard function, which begins execution and returns when it is finished.

When you call a generator function, it does not immediately start running in full. It will give back an iterator object that may be used to call the function. Therefore, this function can be run sequentially, with the yield expression determining which sections to run when.

The iterator's .next() method is used to run these sections. The function continues running after the .next() method is called until the next yield is located, the function completes, or a return statement is executed. The generator function always returns an object to you when you call the .next() method.

In JavaScript we use function* as the prefix to the generator function name, for example,

function* getNaturalNumber() { 
        let number=1; 
        while (true) 
            yield number++; 
    } 
 
var naturalNumberIterator = getNaturalNumber(); 
 
console.log(naturalNumberIterator.next().value);  // 1 
console.log(naturalNumberIterator.next().value);  // 2 
console.log(naturalNumberIterator.next().value);  // 3 
console.log(naturalNumberIterator.next().value);  // 4 

This question is a regular feature in Redux interview questions, be ready to tackle it.  

When we refresh a page in a web application, the state always resets back to the default values, which is bad when you want to construct a huge online application like an e-commerce site.

Using the native JavaScript localStorage.setItem() method, we can manually make the state persistent, but in reality, this would require us to write the entire thing from scratch and maintain the state's logical structure.

Developers can save the Redux store in persistent storage, such as the local storage, by using the Redux Persist package. As a result, the site state will still be retained even after refreshing the browser. Additionally, Redux Persist provides methods with an intuitive API that lets us customize the state that is saved and rehydrated.

This is a frequently asked question in React Redux interview questions.  

Redux enables you to control the application's state through a unidirectional flow in which a child component can directly access the state from the Redux Store. Redux eliminates the necessity for prop drilling, which means that it is not necessary to obtain state updates from parent components.

As the application's programming and functionality become more complicated, controlling its state will likewise become more difficult until we have sound management or control over the application's state. This is accomplished in Redux using the Redux Workflow, which consists of the subsequent phases.

1. When a user engages with an application and performs certain actions, the dispatcher sends out an action object to reflect these activities. This indicates that any changes a user makes to an application trigger a request to the store in order to alter the application's state. 
2. After receiving the request, the store accepts the action object and calls the root reducer function to carry out the required action and give the application's next stage. The task is divided into smaller reducer functions by the root reducer, which together carry out the entire change state of the application. 
3. The updates are then transmitted to the middleware, which tests the actions to see if they are valid for the store. The action is modified by the middleware as needed, and the updates are then sent to the store. 
4. When a store receives information about changes in the application's state. When a state changes, the store notifies registered listeners of the change. The application is then updated in various places as necessary. 

Expect to come across this popular question in React and Redux interview questions.  

Reducers are pure functions that take an application's state and an action as inputs and output a new state. In Redux, reducers intercept the dispatched actions inside the Store and create a new State with the necessary changes to update the Redux state.

For example, let us assume we have two action objects increaseAction and decreaseAction, these actions may get dispatched and intercepted by the reducer.

const increaseAction = { 
  type: 'INCREASE', 
};  
const decreaseAction = { 
  type: 'DECREASE' 
};  

The increaseAction has a type of property ‘INCREASE,’ this signals the reducer about the kind of action that has occurred. The Reducer then executes the change and returns a new state according to the action object, i.e., increase the count by 1. Similarly, the count decrease by 1 for decreaseAction, although the action may not be from one of the expected types in such case the current state is returned.

const initialState = { count: 0} 
const countReducer = (state = initialState, action) => { 
  switch(action.type){ 
  case INCREASE:  
    return {...state, count: count + 1}; 
  case DECREASE :  
   return {...state, count: count - 1}; 
  default:  
return state; 
  } 
};  

Using the Redux combineReducers tool, we can now combine all the reducers and create a root reducer. The combineReducers method creates an object whose values are other reducer functions. This root reducer is passed to the Redux’s createStore function to our Redux store.

import countReducer from './countReducer'; 
import songsReducer from './songsReducer'; 
import { combineReducers, createStore } from 'redux'; 
const rootReducer = combineReducers ({ 
  countReducer, 
  songsReducer 
}); 
const store = createStore(rootReducer);  

In the Redux library, reducers are used to change the registered states inside the Redux store. Thus, reducers are crucial in a Redux application and hence special attention must be paid while writing the reducer’s logic. Here are some of the things that we should never do inside a reducer in our Redux app. 

• While writing reducer logic, we must never modify the argument of the reducer. In Redux, reducers are pure functions and inputs ought to be copied rather than changed. 
• We must ensure that we do not carry out any side operations (or side effects), such as API requests, routing changes, etc. 
• In a reducer, we should not use non-pure functions like Date.now(), Math.random(), etc. 

The Redux Form is a HOC (Higher Order Component) that makes use of React-Redux to allow HTML forms in React to store all of its state in Redux, with access to these states from both React and Redux. Redux Form offers great compatibility with various UI frameworks, such as Material UI, React Widgets, React Bootstrap, etc.

Redux Form is really simple to utilize and put into practice; all we need to do is wrap our form component in the HOC that Redux Form provides, and we are good to go.

Redux Form makes it very simple to apply validation to the form. We can add validations for the entire form as well as specific fields.

Redux form provides several benefits to the form component in our applications: 

• Effortless development: Redux forms greatly simplify the process of controlling a form's state. You can simply wrap your form in HOC and utilize Redux-form Field. That is all, your Redux form is complete and ready for usage. 
• Reusable Component: We can also create and reuse input components for the form fields. 
• Validation: For working with validations, Redux-form is a really convenient package. You can simply create a large number of validations for various situations. It offers validation methods, allowing you to check all the data in your form at once. Additionally, you can offer unique value validation functions for every Field or FieldArray. Furthermore, you only need to define your validation routines once for your application in order to utilize them across all of your forms. 

There are several disadvantages to using a Redux form excessively in your application, such as. 

• React is best used for the transient state that does not affect the app globally and does not alter in complicated ways. Contrarily, use Redux for a state that is important globally or is altered in complex ways. However, Redux form defies this rule of thumb and utilizes Redux for transient form data. For example, each keystroke you make while typing must be saved and modified, and you must keep track of all the field values to determine whether a field has been touched, is empty, or has the wrong value. 
• Performance is the most crucial aspect of development, however, with Redux form, every small form state update goes through an entire Redux cycle. Every keypress costs us additional rerendering of the entire application. It causes the UI to freeze for several milliseconds, which the user will notice. It is a serious issue if you ddo notwant to ruin the performance of your application. 
• It is significantly more challenging to manage your form in the redux-form store if it has a more complicated model or multi-step wizards. 
• Assume we want to execute total = price + tip in our Redux form. The price and tip values saved in Redux must be fetched in order to do this straightforward calculation. After that, use dispatch to modify the value for the total that is saved in Redux. It adds a lot of boilerplates and is difficult to understand. Additionally, changing a field value or type dynamically in a Redux form will be very challenging. 

Virtual DOM, as its name suggests, is a virtual replica of the real DOM. Here, virtual refers to a much lighter version of the actual DOM that can be stored in the browser memory as an object. Therefore, it is a memory-based representation of the Real DOM. The Real DOM is synchronized with the representation of a user interface that is maintained in memory.

The actions of the virtual DOM effectively supplement or support those of the real DOM. It offers a method that enables the actual DOM to compute the bare minimum amount of DOM operations while rerendering the user interface.

As part of its declarative methodology, React implements the idea of a virtual DOM during the rendering process. This method enables us to define the state that the user interface (UI) should be in before React actually implements it. It helps to write more predictable, smoother code so we can concentrate on building components by abstracting manual DOM manipulations away from the developer.

In certain cases, a simple one-object DOM will be sufficient to meet all of the needs of your web app or web page. However, there are situations when you need external scripts to display something without interfering with your already-existing elements.

In such situations, shadow DOMs are useful. Shadow DOMs are DOMs that exist inside the original DOM, have their own set of scopes, and sit in isolation.

Shadow DOMs, which are effectively independent web components, allow modular interfaces to be built without interfering with one another. 

Shadow DOMs support encapsulation, or the ability to keep HTML structure, style, and behaviors distinct and concealed from other code to prevent conflicts. For instance, conside a range input.

<input type="range" />  

When we use the developer tools in the browser to investigate the element, all we will see is a straightforward input element. However, browsers internally encapsulate and conceal additional components and styles that make up the input slider.

To view the shadow DOM using Chrome DevTools, select "Settings," then "Show user agent shadow DOM." 

In Redux, all of your application state is stored in the store, which is an object that contains your app's entire state tree. To update the state stored inside the Redux Store, we must dispatch actions as it is the only way to interact with Redux Store.

Redux sends a dummy action to your reducer when a store is created in order to fill it with the initial state. Just keep in mind that your reducer should return some sort of initial state if the state provided to it as the first parameter is undefined. You are not supposed to handle the dummy action directly.

Since, we do not want the initial state of our application to be undefined we must initialize the state manually. The initial state can be passed directly to the createStore method.

// initial State 
const  initialState = { 
  todos: ["eat", "code", "sleep"], 
} 
 
function todosReducer(state, action) { 
  switch (action.type) { 
    case 'ADD_TODO': 
      return {...state, todos: [...state.todos, action.todo]} 
    default: 
      return state 
  } 
} 
 
const store = createStore(todosReducer, initialState) 

The other approach is to pass a default state parameter to the reducers so that when the dummy action is passed, the reducer will use the default initial state from its parameters.

// initial State 
const  initialState = { 
  todos: ["eat", "code", "sleep"], 
} 
function todosReducer(state = initialState, action) { 
  switch (action.type) { 
    case 'ADD_TODO': 
      return {...state, todos: [...state.todos, action.todo]} 
    default: 
      return state 
  } 
} 
const store = createStore(todosReducer) 

A must-know for anyone heading into a Redux interview, this question is frequently asked in React Redux interview questions.  

In Redux, all of your application state is stored in the store, which is an object that contains your app's entire state tree. The connect function from the react-redux package or the useSelector hook is the typical method for gaining access to the store from a React component. These functions let you define the state-related parts that your component needs, and if any of those state-related pieces change, they will automatically be passed along and the component will be re-rendered.

But rarely, you might need to use a component outside of React to retrieve the Redux store state. In these circumstances, you can obtain the store's current state by using the store.getState() method. The whole state object is returned by this method, which you can use to retrieve the particular values you require.

For example, in the code below, we are exporting the store object. This object can be imported at any file to access the Redux State using store.getState()

// store.js 
import { createStore } from 'redux'; 
// Create a Redux store 
export const store = createStore(reducer); 

// someFile.js 
import {store} from './store.js' 
// Get the current state of the store 
const state = store.getState(); 
// Access a specific piece of state 
const value = state.someKey;  

It's no surprise that this one pops up often in Redux interview questions.  

Selectors are Redux functions that take a Redux state as input and return a subset of it after applying various calculations, transformations, mappings, filters, etc. In this manner, a selector might contain the logic of how to retrieve data for a certain view. For example,

const data = useSelector(state => state.some.deeply.nested.field)

The state structure should ideally only be known by your reducer functions and selectors, so you would only need to update those two pieces of logic if you changed where any state is stored. Therefore, instead of always defining reusable selectors inside of a component, it is typically preferable to declare them directly inside of the slice files.

Wherever you have access to the complete Redux root state value, you can use a selector function. This covers middleware, Thunks, Sagas, the useSelector hook, and the mapState function for connect, and more.

Selector functions frequently have to carry out somewhat "expensive" calculations or create derived values that are new object and array references. Since the pricey procedures will produce the same results when called again without a state change, you should omit them.

These costly selector calculations can be memoized with the help of the Reselect library. To produce memoized selectors, Reselect offers a function named createSelector. In addition to accepting one or more "input selector" functions, createSelector also accepts an "output selector" function. It then returns a brand-new selector function for you to utilize.

When you invoke the createSelector, Reselect runs your input selectors using each of the arguments you supplied and examines the values that are returned. The output selector will be run again with those results as the arguments if any of the results are different from the previous results. It will return the cached final result from before if all of the results are identical to those from the previous run of the output selection.

A common question in React Redux interview questions, don't miss this one.

The idea that your Redux Store should be divided into slices rather than numerous reducer files, action files, and selector files has been formalized thanks to the Redux Toolkit. Each slice is typically responsible for owning any reducers, selectors, or thunks that primarily access or manipulate its particular portion of the data.

Reducers are where the Redux State is updated, and RTK's createSlice function makes the process of creating them simpler. Each of our reducers has the opportunity to respond to an action by creating a new state when it is passed to our Redux Store. Without RTK, Redux reducers frequently have massive switch statements that scan for various action kinds. RTK allows you to design reducer methods and automatically generates the actions and action types related to those methods.

It's no surprise that this one pops up often in React Redux interview questions.  

You may design the container component and manually connect it to the Redux store using store.subscribe(). Albeit, React Redux provides connect()() method with additional advantages to create container components in React, such as:

• There are some performance enhancements and optimizations provided by the connect() method that you might not be able to create manually. 
• Another benefit of connect() is decoupling of your React components from Redux and the resultant cleaner code base. 
• Furthermore, connect() offers more flexibility by enabling you to set container components to accept dynamic props based on the props that were first supplied to them. This is helpful for binding action creators to a specific variable from props or choosing a slice of the Redux state based on props. 
• It is recommended to only utilize one Redux store per application, however if your project calls for several Redux stores, connect() enables you to quickly indicate which store a container component should be connected to.

In Redux architecture it is recommended to only utilize one store per application. Updates in Redux are kept modular by using a number of reducers that are further divided into a reducer tree. If we choose several stores before adequately understanding reducer composition, our Redux application may lose out on many advantages that come with using a single store, such as: 

• By explicitly constructing a reducer that calls other reducers with additional information and in a certain order, reducer composition makes it simple to implement "dependent updates" similar to waitFor in Flux. 
• It is relatively simple to persist, hydrate, and read the state when only one store is used. There is only one data storage that needs to be filled and rehydrated on the client, and JSON may describe its contents without caring about the store's ID or name, making server rendering and data prefetching simple. 
• Time travel functionalities in Redux DevTools are greatly facilitated by a single store. Furthermore, because they work at the reducer level, community extensions like redux-undo and redux-optimist are simple to employ. 
• Most important, Redux eliminates the need for multiple stores (except for performance edge cases which you are supposed to profile first anyway).

A common question in React Redux questions, don't miss this one.  

To create a React Redux container component, any component can be wrapped using the higher order component, which is returned by invoking the connect() function.

React Redux's connect() function accepts up to four optional arguments,

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])  

When the container component subscribes to Redux store updates by passing the mapStateToProps function as an argument to the connect function, the mapStateToProps function will be called each time the store updates.

The mapStateToProps is declared with two parameters, it either returns a simple object or another function. Here, the first parameter is the Redux store's current state and the second (an optional parameter) is an object of the props passed to the base component (also called container component). 

const mapStateToProps = function(state) { 
  return { 
    profile: state.user.profile, 
    loggedIn: state.auth.loggedIn 
  } 
} 
export default connect(mapStateToProps)(ProfileComponent); 

If a simple object is returned from mapStateToProps, the returned stateProps object is combined with the component's props, which can be used as normal component props in React.

function ProfileComponent(props) { 
  return ( 
    props.loggedIn 
      ? <Profile profile={props.profile} /> 
      : <div>Please login to view profile.</div> 
  ) 
}  

To the contrary, if a function is returned, it is utilized as mapStateToProps for every instance of the component. This has the potential to help with memoization and rendering efficiency.

To dispatch actions from component to the store we can use the mapDispatchToProps. This way, your components never directly contact the store while using React Redux; connect function takes care of it. 

If supplied, the mergeProps specifies how your own wrapped component's final props are determined. Your wrapped component will automatically receive { ...ownProps, ...stateProps, ...dispatchProps }  if you do not provide mergeProps. 

Both Redux and Relay are the implementations of the Flux architecture for state management of applications. They have many similarities and some differences, such as:

Although both Redux and RxJS are universal libraries for state control in JavaScript. There are very different in terms of their principal and their uses. However, we can observe some similarities between RxJS and Redux 

A. RxJS:  

RxJS is a reactive programming library, it provides fundamental building pieces called Observables that you can use to implement the "observing from a distance" pattern. Consider using RxJS as an alternative to Promises when doing asynchronous activities in JavaScript.

RxJs is an independent javascript library that can be used with any javascript framework, or Vanilla Javascript.

B. Redux: 

Because the Store is reactive, Redux only utilizes a little bit Reactive paradigm in its architecture. Redux does not have a store.set() method since its content cannot be changed remotely. The Store alters itself from a distance when it observes action objects distance whens change events. Additionally, the Store permits remote observers to view its data.

Redux is also an independent JavaScript library it is often compatible with React but can be used with any JavaScript framework (Angular, Vue, etc.).

The frontend and backend of modern web apps are separated. Thus, to fetch data and show to the view, we have to make AJAX calls to a server and retrieve data from a remote endpoint.

For Instance, let’s create a songReducer for our Redux app,

const songsReducer = (state = {}, action) => { 
  switch (action.type) { 
    case 'GET_SONGS': 
      return action.data; 
    default: 
      return state; 
  } 
}; 
export default songsReducer;  

In the above section of the code, Redux action is being created based on a switch case condition. In our example, data will only be provided to the state if action.type is "GET SONGS"; otherwise, an empty state is returned.

Next, let us create an API call (i.e. AJAX request), getSongs() which dispatch the action creator function getSongsAction() when the fetch call is successful.

export const getSongs() { 
  return fetch('/api/data') 
    .then(response => response.json()) 
    .then(json => dispatch(getSongsAction(json))) 
} 
 
export const getSongsAction(data) { 
  return { 
    type: 'GET_SONGS', 
    data: data 
  } 
}

This AJAX request is intercepted by the songReducer inside the store, which then evaluates the action objects and update necessary changes to the state.

Resetting a Redux state to its initial state is something that lots of apps need to do. A common scenario where the app state needs to be reset is after the user logs out.

To reuse the logic for resetting the app in a single place, the trick is to create a root reducer over your app's root reducer. This way you are creating a root reducer in your application that assigns the task of handling an action to the reducer created by combineReducers().

Let us take rootReducer as an instance; it should return the starting state following the USER_SINGOUT event. Regardless of the operation, reducers are known to always return the initial state when called with undefined as the first argument.

const appReducer = combineReducers({ 
  /* your app's top-level reducers */ 
}) 
 
const rootReducer = (state, action) => { 
  if (action.type === 'USER_SIGNOUT') { 
    state = undefined 
  } 
 
  return appReducer(state, action) 
}  

You might also need to clean your storage if you are using redux-persist, which keeps a copy of your state in a storage engine. Before setting the state to undefined and cleaning out each storage state key, you must first import the necessary storage engine.

const appReducer = combineReducers({ 
  /* your app's top-level reducers */ 
}) 
 
const rootReducer = (state, action) => { 
  if (action.type === 'USER_SIGNOUT') { 
    Object.keys(state).forEach(key => { 
                storage.removeItem(`persist:${key}`); 
            }); 
            state = undefined; 
  } 
 
  return appReducer(state, action) 
}  

In Redux architecture it is recommended to only utilize one store per application; that said, you will run into issues if you try to have more than one store in your Redux application.

The most frequent issue is that it is difficult to subscribe to the store of top-level providers if we wrap a component in a provider and then wrap a child component in another provider.

const Component1 = () => { 
  return ( 
    <Provider store={store1}> 
      <Provider store={store2}> 
        <Component2 /> 
      </Provider> 
    </Provider> 
  ); 
};  

Let us create context for each store, we can use ReactReduxContext to make one of the stores default by importing it from react-redux.

const store1Context = React.createContext(); 
const store2Context = React.createContext(); 
 
<Provider store={store1} context={store1Context}> 
  <Provider store={store2} context={store2Context}> 
    <App/> 
  </Provider> 
</Provider>  

Additionally, we must develop our own custom selector and custom dispatch hooks. The store with default context (if any), will be used if you use the useSelector, and useDispatch default hooks.

export const useStore1Dispatch = createDispatchHook(store1Context); 
export const useStore1Selector = createSelectorHook(store1Context); 
export const useStore2Dispatch = createDispatchHook(store2Context); 
export const useStore2Selector = createSelectorHook(store2Context);  

The rest of the application can be developed normally, and we can use these custom selector and custom dispatch hooks to use the preferred store in any of the components throughout the application.

Additionally, to create a container component with Higher order component pattern, we can utilize connect() API from react-redux library.

One of the most frequently posed Redux interview questions for experienced, be ready for it.  

Immer is a small package that makes it easier to work with immutable states. Immer can be utilized in any situation that calls for the use of immutable data structures, such as it can be used with React state or React or Redux in conjunction or with configuration management.

Immutable data structures make it possible to identify changes (effectively): if the object's reference did not change, then the object did not change itself. Additionally, it lowers the cost of cloning: Unchanged sections of a data tree can be shared in memory with older iterations of the same state without needing to be replicated.

These advantages may usually be obtained by making sure that you always make an edited duplicate of an object, array, or map rather than changing any of its properties. In actuality, this can make writing code rather difficult because it is simple to violate those restrictions unintentionally.

For JavaScript applications, Webpack is a static module bundler that transforms all of your application's code into a web browser-friendly version. The JavaScript code for your app, node modules, pictures, and CSS styles are all combined to create reusable pieces of code called modules. These modules are packaged to make it simple to utilize them on your website. With this modular separation of responsibilities, Webpack isolates the code according to how it is utilized in your app, making it much simpler to manage, debug, verify, and test your code.

When Webpack analyses your application, it creates a dependency graph outlining the modules your project requires and produces one or more bundles. A bundle is a unique collection of linked code that has been produced and modified for the browser. Webpack recognizes a dependency when one file uses the code from another file, or when one file depends on another. 

A good Redux side-effects middleware should adhere to the following features: 

• When we need to base certain decisions on the current state of our application, having access to the Redux store is useful. 
• Ability to dispatch a distinct action from within the middleware, which will provide us the freedom to start other side effects with various business logics. 
• Ability to execute side effects effectively. 
• Cancel: The ability to cancel side effects to stop an asynchronous process before it completes and has an impact on the state of our application. 
• Enable repeated action triggers from the user (like clicking a refresh button). To eliminate extra processing and to continuously correspond with the user's activities, we want to be able to cancel all past side effects while always keeping the most recent side effect active. 
• For each different dispatched action, execute the same particular side effect. 
• Debounce: Delay the invocation of a side effect by debouncing it until a few milliseconds have passed since the previous invocation.  
• Throttle: Control the frequency of your application's side effects' execution, i.e., stop our side effects from occurring more frequently than once every X milliseconds.  
• Race: At times, we would prefer to compete with several side effects, and when one of them ends, we would like to terminate the others because they are now unnecessary. 
• All: Execute several side effects simultaneously, watch for each one to complete, and then take another action. 

Both Flux and Redux are used to construct scalable and user-friendly applications. Their approaches to application architecture differ from one another while yet sharing certain similarities. There are four major differences between Redux and Flux: 

a. Number of stores per application 

Flux creates multiple stores to control various application components. To make any changes to the application, one must ask the dispatcher to send the prior state as a return value.

Whereas there is just one store in the Redux design that can hold data for several components. A reducer can be specified by developers to effectively manage all the data in one location.

b. Architecture 

In Flux, data is transmitted through actions as users engage with applications. Communication between actions and stores is established by the dispatcher. Action handlers for both user interface and domain states are defined in Flux's store component. Additionally, it is in charge of maintaining the visual layer of apps. When the stores acquire new information, the view component of Flux interfaces with the stores to present updates.

Redux incorporates extra elements while drawing inspiration from Flux principles. In Redux architecture, a reducer is utilized in place of the dispatcher found in Flux. The reducer uses the previous state and actions to move to the next state after receiving objects from Redux's action component. The reducer also adds fresh data to the store. Following the creation of a new state, the store sends an update to view.

c. Business Logic 

Business logic is a set of rules that controls the information flow between the user interface and database for any application or software program. In Flux, according to the data provided by actions, stores manage business logic. In contrast, the reducer in the Redux design handles business logic after receiving data from the action component. 

d. Debugging 

Flux uses a Dispatcher to enable quick debugging. No cascading updates occur, and a known state makes it simple to identify the root cause.

The Redux makes debugging relatively straightforward using Reducers. There is a single object tree that reflects all of the prior changes.

Typically, programmers divide their apps into a number of pages that may be accessed from several URLs. Each of these pages transforms into a different entry point to access the application. 

Code-splitting is the technique of dividing the application bundle into more manageable pieces needed by each entry point. By only loading the code necessary to run that page, the application's initial load time will be improved. There may be contributing factors involved, such as better application caching or code encapsulation to hide the information not necessary to be displayed for the users.

The secret to code splitting is determining which areas of a page require certain JavaScript dependencies. You can intentionally exclude some dependencies from bundles and then only add them where they are required by using code splitting. This implies that they are also not loaded until they are required, which speeds up the loading of the page by only loading JavaScript when it is required.

The fact that the page is still loading the same amount of code may at first appear illogical, but the difference is that the page might not execute all of the code it loads. For instance, if a dynamic element on a page requires a large dependency, such dependency can result in a noticeable page lag. However, the dependency can be so minor that there is no lag created if it is only loaded when the dynamic element is used. 

You do not have to utilize middleware for async flow in Redux, middleware is only providing the "syntax sugar" and maintains the separation of concern.

Using middleware like Redux Thunk or Redux Promise has the advantage of shielding components from the implementation details of action creators. A component does not know whether the actions are synchronous or asynchronous, whether they are concerned with the Redux state, and whether they call other action creators. Although there is some indirection on the downside, it is worth it in practical situations.

For example: without using middleware we can pass the dispatcher as a parameter to the action creator function.

// action creator 
function loadData(dispatch, userId) { 
  return fetch(`http://someApi.com/${userId}`) 
    .then(res => res.json()) 
    .then( 
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }), 
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err }) 
    ); 
} 
 
// component 
componentWillMount() { 
  loadData(this.props.dispatch, this.props.userId);}

Whereas if we use middleware like Redux Thunk, there is no need to pass the dispatcher to the action creator

// action creator 
function loadData(userId) { 
  return dispatch => fetch(`http://data.com/${userId}`) 
    .then(res => res.json()) 
    .then( 
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }), 
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err }) 
    ); 
} 
 
// component 
componentWillMount() { 
  this.props.dispatch(loadData(this.props.userId));} 

If we use middleware in our project, every action that we dispatch will call a simple JavaScript function called a middleware. A middleware has the ability to manipulate an action in any way inside of that function, including stopping it from being sent to any of the reducers and changing it. For instance, we could design a middleware that console logs each action you execute.

Redux code splitting requires the ability to dynamically add reducers to the store, however, for Redux there can be only one root reducer function. Typically, when the application is first initialized, combineReducers() or a comparable function is called to create the root reducer. To dynamically add new reducers, we must use the combineReducers function once more to re-generate the root reducer.

There are multiple approaches to achieve the general re-initialization of the root reducer to handle code splitting. One of the approaches from them is to call a reusable store.injectReducer() function. But first, we must define it inside our configureStore.

Let us create a createReducer function that takes all the new reducers as an array returns the root reducer by passing the new reducers along with all the static reducers to the combineReducer method of react-redux.

// reducers.js 
import { combineReducers } from 'redux'; 
import students from './reducers/students'; 
import teachers from './reducers/teachers'; 
 
export default function createReducer(asyncReducers) { 
  return combineReducers({ 
    students, 
    teachers, 
    ...asyncReducers 
  }); 
}

Next, we will define a configureStore function that accepts the initialState and returns the Redux Store by calling createReducer function (from reducers.js) as rootReducer to createStore.

Additionally, we will also define an injectAsyncReducer function that adds a new reduces to the asyncReducers object in our Store and replace the current root-reducer with a new updated root-reducer.

// store.js 
import { createStore } from 'redux'; 
import createReducer from './reducers'; 
export default function configureStore(initialState) { 
  const store = createStore(createReducer(), initialState); 
  store.asyncReducers = {}; 
  return store; 
} 
export function injectAsyncReducer(store, name, asyncReducer) { 
  store.asyncReducers[name] = asyncReducer; 
  store.replaceReducer(createReducer(store.asyncReducers)); 
}  

The injectAsyncReducer can be called from anywhere in our React Redux application to add new reducers dynamically to the redux store. For instance, in the code below we are dynamically adding examScores reducer for the StudentInfo page.

// routes.js 
import { injectAsyncReducer } from './store'; 
function createRoutes(store) { 
  // ...  
  const StudentInfoRoute = { 
    // ... 
    getComponents(location, callback) { 
      require.ensure([ 
        './pages/StudentInfo', 
        './reducers/examScores' 
      ], function (require) { 
        const StudentInfo = require('./pages/StudentInfo').default; 
        const examScoresReducer = require('./reducers/examScores').default; 
 
        injectAsyncReducer(store, 'examScores', examScoresReducer); 
        callback(null, StudentInfo); 
      }) 
    } 
  }; 
  // ... 
}