Redux Interview Questions and Answers: Redux is an open-source JavaScript library for managing application state. It was created by Dan Abramov and Andrew Clark and written in JavaSCript.
Redux Interview Questions
Q:- What is Redux?
Redux is a javascript library for managing application state.

It is most commonly used with libraries such as React.js or Angular, etc.

Redux - Basic Concepts

Q:- What is the need of Redux OR Why we use Redux?

Suppose, you need to pass data in between such components that don't have any relationship (parent-child), so while making communication between such components, it is difficult to pass data and maintaining them is also a very difficult task.

Solution:

There are three possible solution to solve this probelm.

  • Redux
  • Context API
  • Hookes - useContext + useReducer

In such a case redux is very useful because Redux eliminates the need to continuously pass data from one component to another component.

If you are using redux with react, states will no longer need to be lifted up

Everything is handled by Redux itself.

Redux provides a way to centralize the state of your application.
Q:- What are the benefits of using Redux?

Following are the benefits of using Redux:

  1. Single-Source of Truth
  2. Predictable States
  3. Easy to Maintain
  4. Reusable Code
  5. No need to uplift State
  6. Easy to Debug
You may also like - React.js Interview Questions
Q:- How to Install Redux?

Redux is available as a package on NPM.

# Using NPM npm i redux #OR # Using Yarn yarn add redux
Q:- What are the Redux Core Principles?

Redux can be described in three basic principles

  1. Single-Source of Truth
  2. State is Read-Only
  3. Changes are made with Pure Functions
1. Single-Source of Truth:

The state of your whole application is stored in an object tree, called Store.

2. State is Read-Only:

The only way to change the state is to dispatch an Action, an object describing what happened.

3. Changes are made with pure functions:

To specify how the state tree is transformed by actions, you write pure Reducers.

You may also like - JavaScript Interview Questions
Q:- How Redux Works - Redux Workflow?

Redux allows you to manage the state of the application using single source of truth, called Store, Any Component can directly access the state from the Store using Subscribe method.

Let's understand the Redux workflow step by step:

  1. Store - Redux offers a solution of storing all your application's state at one place, called store.
  2. Action - Actions can be dispatch based on the Event (e.g. OnClick, OnChange, etc).
  3. Reducer - Reducers are the pure functions which takes the previous state and an action, and return the next state. (Always return new state objects, instead of mutating the previous state).
  4. Subscribe - Any components can easily subscribe to store.
  5. In Redux, components don't communicate directly with each other, but rather all state changes must go through the single source of truth, the store.

Redux - Advanced Concepts

Q:- What are the important Redux Terminology?
  1. Store
  2. Reducer
  3. Action
  4. Action Creator
  5. Dispatch
  6. Subscribe
  7. Provider
  8. Connect
Q:- What is Store? How to create Store in React?

A Store is an Object which holds the whole state tree of your application.

import React, { Component } from "react"; import { createStore } from "redux"; const initialState = { lang_code: "en", }; const langReducer = (state = initialState, action) => { //make a copy of initialState //(you can also use - Object.assign({}, state)) let newState = {...state}; if (action.type === "SET_LANGUAGE") { newState.lang_code = action.lang_code; } return newState; }; const store = createStore(langReducer);
Q:- What is Reducer?

Reducer are pure fucntions which take the previous state of the app and return a new state based on the action passed to it.

const language = (state, action) => { let newState = {...state}; if (action.type == "SET_LANGUAGE") { newState.lang_code = action.lang_code; } return newState; }
Always remember that we should never mutate state inside the reducer, always return a new copy of state.

You can achieve this using

  1. Object.assign()
  2. Spread (…) operator
Q:- What is Action?

Actions are plain JavaScript objects and they must have a type property to indicate the type of action to be carried out. They must also have a payload that contains the information that should be worked on by the action.

Actions are dispatch using store.dispatch() method.

{ type: [TYPE], payload: [DATA] }
Q:- What is Action Creator?

Action Creator is a function which return an action.

Q:- What is Dispatch?

Dispatch is a method which triggers action with type and payload to Reducer.

store.dispatch() store.dispatch({ type: "SET_LANGUAGE", lang_code: "hi" });
Q:- What is Subscribe? How you can use it in React App?

Subscribe is a method which is used to subscribe data/state from Store automatically whenever there will any changes in state.

store.subscribe() store.subscribe(() => { let storeData = store.getState(); console.log(storeData); });
Q:- What is Provider?

The Provider is a component that has a reference to the Store and provides the data from the Store to the component it wraps.

Q:- What is Connect?

Connect is a function communicates with the Provider.

Redux Example: Let's understand with a complete example.
import React, { Component } from "react"; import { createStore } from 'redux'; /** * This is a reducer, a pure function with (state, action) => state signature. * It describes how an action transforms the state into the next state. * * The shape of the state is up to you: it can be a primitive, an array, an object, * or even an Immutable.js data structure. The only important part is that you should * not mutate the state object, but return a new object if the state changes. * */ // Let's make a language reducer - langReducer const initialState = { lang_code: "en" }; const langReducer = (state = initialState, action) => { let newState = {...state}; //make a copy of initialState if (action.type === "SET_LANGUAGE") { newState.lang_code = action.lang_code; } return newState; }; // Create a Redux store holding the state of your app. let store = createStore(langReducer) // The only way to mutate the internal state is to dispatch an action. store.dispatch({ type: "SET_LANGUAGE", lang_code: "hi" }); // You can use subscribe() to update the UI in response to state changes. store.subscribe(() => console.log(store.getState()))

Note:

  1. It is just a basic example (All in One File), that help will help to understand redux implementation.
  2. In Real Apps, You can organize your code in better ways, easier to maintaine & reuse etc.
Q:- What is Pure Functions?
A pure function always return same output for the same input arguments.

A pure function is a function which

  1. always return the same output for the same input
  2. has no side effects, means it doesn't change any external state.
Example
const add = (a, b) => a + b // A pure function
You may also like - Next.js Interview Questions
Q:- How to access redux store outside a react component?
You can export the store from the module you called createStore.
//Store.js const store = createStore(Reducer); export default store; //Client.js import store from './Store' store.dispatch(action);
You may also like - React.js Interview Questions
Q:- Can we have have multiple reducers?

Yes

Q:- Can we combine multiple reducers? if yes, then how?

Yes, we can combine multiple reducers using - combineReducers.

import React, { Component } from "react"; import { createStore, combineReducers } from "redux"; const initialLangState = { lang_code: "en" }; const initialUserState = { user_details: {} }; const language = (state = initialLangState, action) => { let newState = { ...state }; if (action.type == "SET_LANGUAGE") { newState.lang_code = action.lang_code; } return newState; }; const user = (state = initialUserState, action) => { let newState = { ...state }; if (action.type == "SET_USER") { newState.user_details = action.user_details; } return newState; }; let rootReducers = combineReducers({ language: language, user: user, }); const store = createStore(rootReducers);
Q:- Can Redux only be used with React?

No, Redux can be used as a data store. it is most commonly used with React.js and React Native.

Redux can also be used with Angular, Vue.js etc

Q:- Where does redux actually store data?

In Memory, It keeps only reference not actual data.

Q:- What is Middleware? Why middleware is used in Redux?

Middleware are being used in redux for extended functionality. it works between dispatching an action, and the moment it reaches to the reducer.

The most common use case for middleware is to support asynchronous actions.

The Customized middleware functions can be created by writing high order functions (a function that returns another function), which wraps around some logic.

Middleware are used Redux for

  1. logging
  2. crash reporting
  3. routing
  4. asynchronous API calls
Q:- What is applyMiddleware?

A store enhancer that applies the given middleware.

Q:- What is Redux Thunk? Why do we need Redux Thunk?

Redux Thunk is a middleware.

Redux Thunk allows you to write action creators that return a function instead of an action.

The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met.

Q:- Difference between redux, react-redux, redux-thunk, redux-saga?
  1. redux: main core redux library (independent from react)
  2. react-redux: connects your redux store with react components
  3. redux-thunk: a redux middleware which helps you with async actions
  4. redux-saga: a redux middleware library to handle asynchronous actions
Q:- Is Redux immutable?

Yes

Q:- Is Redux asynchronous?

Without middleware, Redux store only supports synchronous data flow.

Q:- What is the difference between Redux and Flux?
Flux is a Design Pattern and Redux is a library
REDUX FLUX
Single Store Multiple Store
Redux is a container for JavaScript apps. Flux is a container for application state and logic that are registered to callbacks.
It offers interesting features such as writing applications, testing in different environments such as a server, client, etc. It is an observer pattern that is modified to fit React.
In redux, actions can be functions or promises. It is a fancy name given to observer pattern and Facebook has developed tools to aid the implementation of these patterns.
Redux is the first choice for web developers because it offers live code editing. Flux supports actions that are simple JavaScript objects.