Most frequently Asked Redux Interview Questions

1. What is Redux?
2. What are the Principles of Redux?
3. What are the Benefits of Redux?
4. What are the Data Flow in Redux?
5. What is Flux?
6. What is Redux DevTools?
7. How to add multiple middlewares to Redux?
8. What do you mean by redux-saga?
9. How can we dynamically load reducers for code splitting in a Redux application?
10. What is store in redux?
11. How can we dispatch an action in reducer?
12. How do we add an element to array in reducer of React native redux?

What is Redux?

Redux is a container for JavaScript Apps, it also helps in organizing and maintaining the data flow.It helps in solving all the problems by managing application's state with a single global object known as Store.
Redux gives us live code by editing combined with time travelling debugger.

What are the Principles of Redux?

There are 3 principles of Redux:
Single Source of Truth - state of our application which is stored in an object tree within a single store, it is stored in a single tree as it makes debugging easy and also development faster.
State is Read-only - It is the only way for changing the state is for emitting actions, and also describing what happened.
Changes are made with pure functions - The state tree is transformed by the actions if we write pure reducers, it is a central place where state modification takes place.

What are the Benefits of Redux?

Maintainability
Organization
Server rendering
Developing tools
Easing of testing

What are the Data Flow in Redux?

• Action is used when the user interacts with the application.
• Root Reducer is used when the current state and the action is dispatched.
• Store helps in notifying the view by executing their callback functions.
• View can retrieve updated state and re-render again.

What is Flux?

Flux is a paradigm which is used as a replacement for traditional MVC pattern, it is an architecture which complements react and the concept of Unidirectional Data flow.It also stores and views components with distinct inputs and outputs.

What is Redux DevTools?

Redux DevTools is used as a time travel environment for redux with reloading, action play and customizable UI.

How to add multiple middlewares to Redux?

import { createStore, applyMiddleware } from 'redux'
const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);

What do you mean by redux-saga?

Redux-saga is a documentation that helps in making elevation effects in redux applications easier and superior.

npm install --save redux-saga

How can we dynamically load reducers for code splitting in a Redux application?

reducers.js

import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';

export default function createReducer(asyncReducers) {
  return combineReducers({
    users,
    posts,
    ...asyncReducers
  });
}

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

routes.js

import { injectAsyncReducer } from './store';

// Assuming React Router here but the principle is the same
// regardless of the library: make sure store is available
// when you want to require.ensure() your reducer so you can call
// injectAsyncReducer(store, name, reducer).

function createRoutes(store) {
  // ...

  const CommentsRoute = {
    // ...

    getComponents(location, callback) {
      require.ensure([
        './pages/Comments',
        './reducers/comments'
      ], function (require) {
        const Comments = require('./pages/Comments').default;
        const commentsReducer = require('./reducers/comments').default;

        injectAsyncReducer(store, 'comments', commentsReducer);
        callback(null, Comments);
      })
    }
  };

  // ...
}

What is store in redux?

Store is used for holding the application state and supplies the helper method for accessing the state.

export function configureStore(initialState) {
return createStore(rootReducer, initialState);
}

How can we dispatch an action in reducer?

//reducer

const initialState = {
    audioElement: new AudioElement('test.mp3'),
    progress: 0.0
}

initialState.audioElement.audio.ontimeupdate = () => {
    console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration);
    //how to dispatch 'SET_PROGRESS_VALUE' now?
};


const audio = (state=initialState, action) => {
    switch(action.type){
        case 'SET_PROGRESS_VALUE':
            return Object.assign({}, state, {progress: action.progress});
        default: return state;
    }

}

export default audio;

How do we add an element to array in reducer of React native redux?

There are 2 different options to add item to an array without mutation:

case ADD_ITEM :
    return {
        ...state,
        arr: [...state.arr, action.newItem]
    }

OR

case ADD_ITEM :
    return {
        ...state,
        arr: state.arr.concat(action.newItem)
    }