Redux Interview Questions and Answers

Redux is a javascript library for managing application state.

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

Suppose, you need to pass data (state and props) in between such components that don't have any relationship, so while making such communication between two components it is difficult to pass data (state and props) and maintaining them is also very difficult task. In such case Redux is very useful because Redux eliminates the need to continuously pass state from one component to another.

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

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

Redux is available as a package on NPM.

# Using NPM
npm install redux --save

#OR

# Using Yarn
yarn add redux

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

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

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

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

You may also like - Node.js Interview Questions

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. Dispatch - Actions can be dispatch based on the Event (e.g. OnClick, OnChange, etc).
3. Reducers - 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.

1. Store
2. Action
3. Reducer
4. Dispatch
5. Subscribe
6. Provider
7. Connect

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

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'

const store = createStore(rootReducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

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 sent using store.dispatch() method.

action: { 
  type: [TYPE], 
  payload: [DATA] 
}

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

function(state, action) => 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

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

store.dispatch()

Subscribe is a method which is used to Subscribe data/state from Store.

store.subscribe()

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

Connect is a function communicates with the Provider.

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
let language = (state, action) => {
  let newState = {};
  if (action.type === "SET_LANGUAGE") {
    newState["lang_code"] = action.lang_code;
  } else {
    newState["lang_code"] = "en";
  }
  return newState;
};

// Create a Redux store holding the state of your app.
let store = createStore(language)

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

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.

const add = (a, b) => a + b // A pure function

You may also like - Next.js Interview Questions

Flux is a Design Pattern and Redux is a library

You may also like - MongoDB Interview Questions

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