How to programmatically trigger click event in React?
You could use the ref prop to acquire a reference to the underlying HTMLInputElement object through a callback, store the reference as a class property, then use that reference to later trigger a click from your event handlers using the HTMLElement.click method.

This can be done in two steps:

  1. Create ref in render method:

<input ref={(input) => (this.inputElement = input)} />

Apply click event in your event handler:

this.inputElement.click();

Is it possible to use async/await in plain React?
If you want to use async/await in React, you will need Babel and transform-async-to-generator plugin. React Native ships with Babel and a set of transforms.

What are the common folder structures for React?
There are two common practices for React project file structure.

  1. Grouping by features or routes:

One common way to structure projects is locate CSS, JS, and tests together, grouped by feature or route.

common/
├─ Avatar.js
├─ Avatar.css
├─ APIUtils.js
└─ APIUtils.test.jsfeed/
├─ index.js
├─ Feed.js
├─ Feed.css
├─ FeedStory.js
├─ FeedStory.test.js
└─ FeedAPI.jsprofile/
├─ index.js
├─ Profile.js
├─ ProfileHeader.js
├─ ProfileHeader.css
└─ ProfileAPI.js

Grouping by file type:

Another popular way to structure projects is to group similar files together.

api/
├─ APIUtils.js
├─ APIUtils.test.js
├─ ProfileAPI.js
└─ UserAPI.jscomponents/
├─ Avatar.js
├─ Avatar.css
├─ Feed.js
├─ Feed.css
├─ FeedStory.js
├─ FeedStory.test.js
├─ Profile.js
├─ ProfileHeader.js
└─ ProfileHeader.css

What are the popular packages for animation?
React Transition Group and React Motion are popular animation packages in React ecosystem.

What is the benefit of styles modules?
It is recommended to avoid hard coding style values in components. Any values that are likely to be used across different UI components should be extracted into their own modules.

For example, these styles could be extracted into a separate component:

export const colors = {  white,  black,  blue,}; export const space = [0, 8, 16, 32, 64];

And then imported individually in other components:

import { space, colors } from “./styles”;

What are the popular React-specific linters?
ESLint is a popular JavaScript linter. There are plugins available that analyse specific code styles. One of the most common for React is an npm package called eslint-plugin-react. By default, it will check a number of best practices, with rules checking things from keys in iterators to a complete set of prop types.

Another popular plugin is eslint-plugin-jsx-a11y, which will help fix common issues with accessibility. As JSX offers slightly different syntax to regular HTML, issues with alt text and tabindex, for example, will not be picked up by regular plugins.

How to make AJAX call and in which component lifecycle methods should I make an AJAX call?
You can use AJAX libraries such as Axios, jQuery AJAX, and the browser built-in fetch. You should fetch data in the componentDidMount() lifecycle method. This is so you can use setState() to update your component when the data is retrieved.

For example, the employees list fetched from API and set local state:

class MyComponent extends React.Component { 
constructor(props) {   
super(props);   
this.state = {     
employees: [],     
error: null,   
}; 
}  
componentDidMount() {   
fetch(“https://api.example.com/items”)     
.then((res) => res.json())     
.then((result) => {  
this.setState({           
employees: result.employees,         
});       
},       
(error) => {
this.setState({ error });
}     
);  }  
render() {   
const { error, employees } = this.state;   
if (error) {      return <div>Error: {error.message}</div>;   
} else {     
return (        <ul>          {employees.map((employee) => (            <li key={employee.name}>              {employee.name}-{employee.experience}            </li>          ))}        </ul>      );    }  }}

What are render props?
Render Props is a simple technique for sharing code between components using a prop whose value is a function. The below component uses render prop which returns a React element.

<DataProvider render={(data) => <h1>{`Hello ${data.target}`}</h1>} />

Libraries such as React Router and DownShift are using this pattern.

What is React Router?
React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what’s being displayed on the page.

How React Router is different from history library?
React Router is a wrapper around the history library which handles interaction with the browser’s window.history with its browser and hash histories. It also provides memory history which is useful for environments that don’t have global history, such as mobile app development (React Native) and unit testing with Node.

What are the <Router> components of React Router v4?
React Router v4 provides below 3 <Router> components:

    1. <BrowserRouter>
    2. <HashRouter>
    3. <MemoryRouter>

The above components will create browser, hash, and memory history instances. React Router v4 makes the properties and methods of the history instance associated with your router available through the context in the router object.

What is the purpose of push() and replace() methods of history?
A history instance has two methods for navigation purpose.

    1. push()
    2. replace()

If you think of the history as an array of visited locations, push() will add a new location to the array and replace() will replace the current location in the array with the new one.

How do you programmatically navigate using React Router v4?
There are three different ways to achieve programmatic routing/navigation within components.

  1. Using the withRouter() higher-order function:

The withRouter() higher-order function will inject the history object as a prop of the component. This object provides push() and replace() methods to avoid the usage of context.

import { withRouter } from “react-router-dom”;
// this also works with ‘react-router-native’ 
const Button = withRouter(({ history }) => ( 
<button    type=”button”   
onClick={() => {     
history.push(“/new-location”);   
}} 
>    {“Click Me!”}  </button>));

Using <Route> component and render props pattern:

The <Route> component passes the same props as withRouter(), so you will be able to access the history methods through the history prop.

import { Route } from “react-router-dom”; 
const Button = () => (  <Route   
render={({ history }) => (      <button type=”button” onClick={() => { history.push(“/new-location”);        }}      >        {“Click Me!”}      </button>    )}  />);

Using context:

This option is not recommended and treated as unstable API.

const Button = (props, context) => (  <button type=”button”    onClick={() => {      context.history.push(“/new-location”);    }}  >    {“Click Me!”}  </button>); Button.contextTypes = {  history: React.PropTypes.shape({    push: React.PropTypes.func.isRequired,  }),};

How to get query parameters in React Router v4?
The ability to parse query strings was taken out of React Router v4 because there have been user requests over the years to support different implementation. So the decision has been given to users to choose the implementation they like. The recommended approach is to use query strings library.

const queryString = require(“query-string”);const parsed = queryString.parse(props.location.search);

You can also use URLSearchParams if you want something native:

const params = new URLSearchParams(props.location.search);const foo = params.get(“name”);

You should use a polyfill for IE11.

Why you get “Router may have only one child element” warning?
You have to wrap your Route’s in a <Switch> block because <Switch> is unique in that it renders a route exclusively.

At first you need to add Switch to your imports:

import { Switch, Router, Route } from “react-router”;

Then define the routes within <Switch> block:

<Router>  <Switch>    <Route {/* … */} />    <Route {/* … */} />  </Switch></Router>

How to pass params to history.push method in React Router v4?
While navigating you can pass props to the history object:

this.props.history.push({  pathname: “/template”,  search: “?name=sudheer”,  state: { detail: response.data },});

The search property is used to pass query params in push() method.

How to implement default or NotFound page?
A <Switch> renders the first child <Route> that matches. A <Route> with no path always matches. So you just need to simply drop path attribute as below

<Switch>  <Route exact path=”/” component={Home} />  <Route path=”/user” component={User} />  <Route component={NotFound} /></Switch>

How to get history on React Router v4?
Below are the list of steps to get history object on React Router v4,

  1. Create a module that exports a history object and import this module across the project.

For example, create history.js file:

import { createBrowserHistory } from “history”; export default createBrowserHistory({  /* pass a configuration object here if needed */});

You should use the <Router> component instead of built-in routers. Import the above history.js inside index.js file:

import { Router } from “react-router-dom”;import history from “./history”;import App from “./App”; ReactDOM.render(  <Router history={history}>    <App />  </Router>,  holder);

You can also use push method of history object similar to built-in history object:

// some-other-file.jsimport history from “./history”; history.push(“/go-here”);

How to perform automatic redirect after login?
The react-router package provides <Redirect> component in React Router. Rendering a <Redirect> will navigate to a new location. Like server-side redirects, the new location will override the current location in the history stack.

import React, { Component } from “react”;import { Redirect } from “react-router”; export default class LoginComponent extends Component {  render() {    if (this.state.isLoggedIn === true) {      return <Redirect to=”/your/redirect/page” />;    } else {      return <div>{“Login Please”}</div>;    }  }}

What is React Intl?
The React Intl library makes internationalization in React straightforward, with off-the-shelf components and an API that can handle everything from formatting strings, dates, and numbers, to pluralization. React Intl is part of FormatJS which provides bindings to React via its components and API.

What are the main features of React Intl?
Below are the main features of React Intl,

    1. Display numbers with separators.
    2. Display dates and times correctly.
    3. Display dates relative to “now”.
    4. Pluralize labels in strings.
    5. Support for 150+ languages.
    6. Runs in the browser and Node.
    7. Built on standards.

What are the two ways of formatting in React Intl?
The library provides two ways to format strings, numbers, and dates:

  1. Using react components:

2.  <FormattedMessage3.    id={“account”}4.    defaultMessage={“The amount is less than minimum balance.”}/>

Using an API:

const messages = defineMessages({  accountMessage: {    id: “account”,    defaultMessage: “The amount is less than minimum balance.”,  },}); formatMessage(messages.accountMessage);

How to use <FormattedMessage> as placeholder using React Intl?
The <Formatted… /> components from react-intl return elements, not plain text, so they can’t be used for placeholders, alt text, etc. In that case, you should use lower level API formatMessage(). You can inject the intl object into your component using injectIntl() higher-order component and then format the message using formatMessage() available on that object.

import React from “react”;import { injectIntl, intlShape } from “react-intl”; const MyComponent = ({ intl }) => {  const placeholder = intl.formatMessage({ id: “messageId” });  return <input placeholder={placeholder} />;}; MyComponent.propTypes = {  intl: intlShape.isRequired,}; export default injectIntl(MyComponent);

How to access current locale with React Intl?
You can get the current locale in any component of your application using injectIntl():

import { injectIntl, intlShape } from “react-intl”; const MyComponent = ({ intl }) => (  <div>{`The current locale is ${intl.locale}`}</div>); MyComponent.propTypes = {  intl: intlShape.isRequired,}; export default injectIntl(MyComponent);

How to format date using React Intl?
The injectIntl() higher-order component will give you access to the formatDate() method via the props in your component. The method is used internally by instances of FormattedDate and it returns the string representation of the formatted date.

import { injectIntl, intlShape } from “react-intl”; const stringDate = this.props.intl.formatDate(date, {  year: “numeric”,  month: “numeric”,  day: “numeric”,}); const MyComponent = ({ intl }) => (  <div>{`The formatted date is ${stringDate}`}</div>); MyComponent.propTypes = {  intl: intlShape.isRequired,}; export default injectIntl(MyComponent);

What is Shallow Renderer in React testing?

Shallow rendering is useful for writing unit test cases in React. It lets you render a component one level deep and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.

For example, if you have the following component:

function MyComponent() {  return (    <div>      <span className={“heading”}>{“Title”}</span>      <span className={“description”}>{“Description”}</span>    </div>  );}

Then you can assert as follows:

import ShallowRenderer from “react-test-renderer/shallow”; // in your testconst renderer = new ShallowRenderer();renderer.render(<MyComponent />); const result = renderer.getRenderOutput(); expect(result.type).toBe(“div”);expect(result.props.children).toEqual([  <span className={“heading”}>{“Title”}</span>,  <span className={“description”}>{“Description”}</span>,]);

What is TestRenderer package in React?
This package provides a renderer that can be used to render components to pure JavaScript objects, without depending on the DOM or a native mobile environment. This package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a ReactDOM or React Native without using a browser or jsdom.

import TestRenderer from “react-test-renderer”; const Link = ({ page, children }) => <a href={page}>{children}</a>; const testRenderer = TestRenderer.create(  <Link page={“https://www.facebook.com/”}>{“Facebook”}</Link>); console.log(testRenderer.toJSON());// {//   type: ‘a’,//   props: { href: ‘https://www.facebook.com/’ },//   children: [ ‘Facebook’ ]// }

What is the purpose of ReactTestUtils package?
ReactTestUtils are provided in the with-addons package and allow you to perform actions against a simulated DOM for the purpose of unit testing.

What is Jest?
Jest is a JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It’s often used for testing components.

What are the advantages of Jest over Jasmine?
There are couple of advantages compared to Jasmine:

    • Automatically finds tests to execute in your source code.
    • Automatically mocks dependencies when running your tests.
    • Allows you to test asynchronous code synchronously.
    • Runs your tests with a fake DOM implementation (via jsdom) so that your tests can be run on the command line.
    • Runs tests in parallel processes so that they finish sooner.

Give a simple example of Jest test case
Let’s write a test for a function that adds two numbers in sum.js file:

const sum = (a, b) => a + b; export default sum;

Create a file named sum.test.js which contains actual test:

import sum from “./sum”; test(“adds 1 + 2 to equal 3”, () => {  expect(sum(1, 2)).toBe(3);});

And then add the following section to your package.json:

{  “scripts”: {    “test”: “jest”  }}

Finally, run yarn test or npm test and Jest will print a result:

$ yarn testPASS ./sum.test.js✓ adds 1 + 2 to equal 3 (2ms)

What is flux?
Flux is an application design paradigm used as a replacement for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook uses this pattern internally when working with React.

The workflow between dispatcher, stores and views components with distinct inputs and outputs.

What is Redux?
Redux is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with React, or with any other view library. It is tiny (about 2kB) and has no dependencies.

What are the core principles of Redux?
Redux follows three fundamental principles:

    1. Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
    2. State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.
    3. Changes are made with pure functions: To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.

What are the downsides of Redux compared to Flux?
Instead of saying downsides we can say that there are few compromises of using Redux over Flux. Those are as follows:

    1. You will need to learn to avoid mutations: Flux is un-opinionated about mutating data, but Redux doesn’t like mutations and many packages complementary to Redux assume you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, Immutable.js, or instructing your team to write non-mutating code.
    2. You’re going to have to carefully pick your packages: While Flux explicitly doesn’t try to solve problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a rich ecosystem.
    3. There is no nice Flow integration yet: Flux currently lets you do very impressive static type checks which Redux doesn’t support yet.

What is the difference between mapStateToProps() and mapDispatchToProps()?
mapStateToProps() is a utility which helps your component get updated state (which is updated by some other components):

const mapStateToProps = (state) => {  return {    todos: getVisibleTodos(state.todos, state.visibilityFilter),  };};

mapDispatchToProps() is a utility which will help your component to fire an action event (dispatching action which may cause change of application state):

const mapDispatchToProps = (dispatch) => {  return {    onTodoClick: (id) => {      dispatch(toggleTodo(id));    },  };};

It is recommended to always use the “object shorthand” form for the mapDispatchToProps.

Redux wraps it in another function that looks like (…args) => dispatch(onTodoClick(…args)), and pass that wrapper function as a prop to your component.

const mapDispatchToProps = {  onTodoClick,};

Can I dispatch an action in reducer?
Dispatching an action within a reducer is an anti-pattern. Your reducer should be without side effects, simply digesting the action payload and returning a new state object. Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects.

How to access Redux store outside a component?
You just need to export the store from the module where it created with createStore(). Also, it shouldn’t pollute the global window object.

store = createStore(myReducer); export default store;

What are the drawbacks of MVW pattern?

    1. DOM manipulation is very expensive which causes applications to behave slow and inefficient.
    2. Due to circular dependencies, a complicated model was created around models and views.
    3. Lot of data changes happens for collaborative applications(like Google Docs).
    4. No way to do undo (travel back in time) easily without adding so much extra code.

Are there any similarities between Redux and RxJS?
These libraries are very different for very different purposes, but there are some vague similarities.

Redux is a tool for managing state throughout the application. It is usually used as an architecture for UIs. Think of it as an alternative to (half of) Angular. RxJS is a reactive programming library. It is usually used as a tool to accomplish asynchronous tasks in JavaScript. Think of it as an alternative to Promises. Redux uses the Reactive paradigm because the Store is reactive. The Store observes actions from a distance, and changes itself. RxJS also uses the Reactive paradigm, but instead of being an architecture, it gives you basic building blocks, Observables, to accomplish this pattern.

How to dispatch an action on load?
You can dispatch an action in componentDidMount() method and in render() method you can verify the data.

class App extends Component {  componentDidMount() {    this.props.fetchData();  }   render() {    return this.props.isLoaded ? (      <div>{“Loaded”}</div>    ) : (      <div>{“Not Loaded”}</div>    );  }} const mapStateToProps = (state) => ({  isLoaded: state.isLoaded,}); const mapDispatchToProps = { fetchData }; export default connect(mapStateToProps, mapDispatchToProps)(App);

How to use connect() from React Redux?
You need to follow two steps to use your store in your container:

  1. Use mapStateToProps(): It maps the state variables from your store to the props that you specify.
  2. Connect the above props to your container: The object returned by the mapStateToProps function is connected to the container. You can import connect() from react-redux.

3.  import React from “react”;4.  import { connect } from “react-redux”;5.   6.  class App extends React.Component {7.    render() {8.      return <div>{this.props.containerData}</div>;9.    }10.}11. 12.function mapStateToProps(state) {13.  return { containerData: state.data };14.}15. export default connect(mapStateToProps)(App);

How to reset state in Redux?
You need to write a root reducer in your application which delegate handling the action to the reducer generated by combineReducers().

For example, let us take rootReducer() to return the initial state after USER_LOGOUT action. As we know, reducers are supposed to return the initial state when they are called with undefined as the first argument, no matter the action.

const appReducer = combineReducers({  /* your app’s top-level reducers */}); const rootReducer = (state, action) => {  if (action.type === “USER_LOGOUT”) {    state = undefined;  }   return appReducer(state, action);};

In case of using redux-persist, you may also need to clean your storage. redux-persist keeps a copy of your state in a storage engine. First, you need to import the appropriate storage engine and then, to parse the state before setting it to undefined and clean each storage state key.

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

Whats the purpose of at symbol in the Redux connect decorator?
The @ symbol is in fact a JavaScript expression used to signify decorators. Decorators make it possible to annotate and modify classes and properties at design time.

Let’s take an example setting up Redux without and with a decorator.

  • Without decorator:

·         import React from “react”;·         import * as actionCreators from “./actionCreators”;·         import { bindActionCreators } from “redux”;·         import { connect } from “react-redux”;·          ·         function mapStateToProps(state) {·           return { todos: state.todos };·         }·          ·         function mapDispatchToProps(dispatch) {·           return { actions: bindActionCreators(actionCreators, dispatch) };·         }·          ·         class MyApp extends React.Component {·           // …define your main app here·         }·          export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

With decorator:

import React from “react”;import * as actionCreators from “./actionCreators”;import { bindActionCreators } from “redux”;import { connect } from “react-redux”; function mapStateToProps(state) {  return { todos: state.todos };} function mapDispatchToProps(dispatch) {  return { actions: bindActionCreators(actionCreators, dispatch) };} @connect(mapStateToProps, mapDispatchToProps)export default class MyApp extends React.Component {  // …define your main app here}

The above examples are almost similar except the usage of decorator. The decorator syntax isn’t built into any JavaScript runtimes yet, and is still experimental and subject to change. You can use babel for the decorators support.

What is the difference between React context and React Redux?
You can use Context in your application directly and is going to be great for passing down data to deeply nested components which what it was designed for.

Whereas Redux is much more powerful and provides a large number of features that the Context API doesn’t provide. Also, React Redux uses context internally but it doesn’t expose this fact in the public API.

Why are Redux state functions called reducers?
Reducers always return the accumulation of the state (based on all previous and current actions). Therefore, they act as a reducer of state. Each time a Redux reducer is called, the state and action are passed as parameters. This state is then reduced (or accumulated) based on the action, and then the next state is returned. You could reduce a collection of actions and an initial state (of the store) on which to perform these actions to get the resulting final state.

How to make AJAX request in Redux?
You can use redux-thunk middleware which allows you to define async actions.

Let’s take an example of fetching specific account as an AJAX call using fetch API:

export function fetchAccount(id) {  return (dispatch) => {    dispatch(setLoadingAccountState()); // Show a loading spinner    fetch(`/account/${id}`, (response) => {      dispatch(doneFetchingAccount()); // Hide loading spinner      if (response.status === 200) {        dispatch(setAccount(response.json)); // Use a normal function to set the received state      } else {        dispatch(someError);      }    });  };} function setAccount(data) {  return { type: “SET_Account”, data: data };}

Should I keep all component’s state in Redux store?
Keep your data in the Redux store, and the UI related state internally in the component.

What is the proper way to access Redux store?
The best way to access your store in a component is to use the connect() function, that creates a new component that wraps around your existing one. This pattern is called Higher-Order Components, and is generally the preferred way of extending a component’s functionality in React. This allows you to map state and action creators to your component, and have them passed in automatically as your store updates.

Let’s take an example of <FilterLink> component using connect:

import { connect } from “react-redux”;import { setVisibilityFilter } from “../actions”;import Link from “../components/Link”; const mapStateToProps = (state, ownProps) => ({  active: ownProps.filter === state.visibilityFilter,}); const mapDispatchToProps = (dispatch, ownProps) => ({  onClick: () => dispatch(setVisibilityFilter(ownProps.filter)),}); const FilterLink = connect(mapStateToProps, mapDispatchToProps)(Link); export default FilterLink;

Due to it having quite a few performance optimizations and generally being less likely to cause bugs, the Redux developers almost always recommend using connect() over accessing the store directly (using context API).

class MyComponent {  someMethod() {    doSomethingWith(this.context.store);  }}

What is the difference between component and container in React Redux?
Component is a class or function component that describes the presentational part of your application.

Container is an informal term for a component that is connected to a Redux store. Containers subscribe to Redux state updates and dispatch actions, and they usually don’t render DOM elements; they delegate rendering to presentational child components.

What is the purpose of the constants in Redux?
Constants allows you to easily find all usages of that specific functionality across the project when you use an IDE. It also prevents you from introducing silly bugs caused by typos – in which case, you will get a ReferenceError immediately.

Normally we will save them in a single file (constants.js or actionTypes.js).

export const ADD_TODO = “ADD_TODO”;export const DELETE_TODO = “DELETE_TODO”;export const EDIT_TODO = “EDIT_TODO”;export const COMPLETE_TODO = “COMPLETE_TODO”;export const COMPLETE_ALL = “COMPLETE_ALL”;export const CLEAR_COMPLETED = “CLEAR_COMPLETED”;

In Redux, you use them in two places:

  1. During action creation:

Let’s take actions.js:

import { ADD_TODO } from “./actionTypes”; export function addTodo(text) {  return { type: ADD_TODO, text };}

In reducers:

Let’s create reducer.js:

import { ADD_TODO } from “./actionTypes”; export default (state = [], action) => {  switch (action.type) {    case ADD_TODO:      return [        …state,        {          text: action.text,          completed: false,        },      ];    default:      return state;  }};

What are the different ways to write mapDispatchToProps()?
There are a few ways of binding action creators to dispatch() in mapDispatchToProps().

Below are the possible options:

const mapDispatchToProps = (dispatch) => ({  action: () => dispatch(action()),});const mapDispatchToProps = (dispatch) => ({  action: bindActionCreators(action, dispatch),});const mapDispatchToProps = { action };

The third option is just a shorthand for the first one.

What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()?
If the ownProps parameter is specified, React Redux will pass the props that were passed to the component into your connect functions. So, if you use a connected component:

import ConnectedComponent from “./containers/ConnectedComponent”; <ConnectedComponent user={“john”} />;

The ownProps inside your mapStateToProps() and mapDispatchToProps() functions will be an object:

{  user: “john”;}

You can use this object to decide what to return from those functions.

How to structure Redux top level directories?
Most of the applications has several top-level directories as below:

    1. Components: Used for dumb components unaware of Redux.
    2. Containers: Used for smart components connected to Redux.
    3. Actions: Used for all action creators, where file names correspond to part of the app.
    4. Reducers: Used for all reducers, where files name correspond to state key.
    5. Store: Used for store initialization.

This structure works well for small and medium size apps.

What is redux-saga?
redux-saga is a library that aims to make side effects (asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.

It is available in NPM:

$ npm install –save redux-saga

What is the mental model of redux-saga?
Saga is like a separate thread in your application, that’s solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal Redux actions, it has access to the full Redux application state and it can dispatch Redux actions as well.

What are the differences between call() and put() in redux-saga?
Both call() and put() are effect creator functions. call() function is used to create effect description, which instructs middleware to call the promise. put() function creates an effect, which instructs middleware to dispatch an action to the store.

Let’s take example of how these effects work for fetching particular user data.

function* fetchUserSaga(action) {  // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.  // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable  const userData = yield call(api.fetchUser, action.userId);   // Instructing middleware to dispatch corresponding action.  yield put({    type: “FETCH_USER_SUCCESS”,    userData,  });}

What is Redux Thunk?
Redux Thunk middleware 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. The inner function receives the store methods dispatch() and getState() as parameters.

What are the differences between redux-saga and redux-thunk?
Both Redux Thunk and Redux Saga take care of dealing with side effects. In most of the scenarios, Thunk uses Promises to deal with them, whereas Saga uses Generators. Thunk is simple to use and Promises are familiar to many developers, Sagas/Generators are more powerful but you will need to learn them. But both middleware can coexist, so you can start with Thunks and introduce Sagas when/if you need them.

What is Redux DevTools?
Redux DevTools is a live-editing time travel environment for Redux with hot reloading, action replay, and customizable UI. If you don’t want to bother with installing Redux DevTools and integrating it into your project, consider using Redux DevTools Extension for Chrome and Firefox.

What are the features of Redux DevTools?
Some of the main features of Redux DevTools are below,

    1. Lets you inspect every state and action payload.
    2. Lets you go back in time by cancelling actions.
    3. If you change the reducer code, each staged action will be re-evaluated.
    4. If the reducers throw, you will see during which action this happened, and what the error was.
    5. With persistState() store enhancer, you can persist debug sessions across page reloads.

What are Redux selectors and why to use them?
Selectors are functions that take Redux state as an argument and return some data to pass to the component.

For example, to get user details from the state:

const getUserData = (state) => state.user.data;

These selectors have two main benefits,

    1. The selector can compute derived data, allowing Redux to store the minimal possible state
    2. The selector is not recomputed unless one of its arguments changes

What is Redux Form?
Redux Form works with React and Redux to enable a form in React to use Redux to store all of its state. Redux Form can be used with raw HTML5 inputs, but it also works very well with common UI frameworks like Material UI, React Widgets and React Bootstrap.

What are the main features of Redux Form?
Some of the main features of Redux Form are:

    1. Field values persistence via Redux store.
    2. Validation (sync/async) and submission.
    3. Formatting, parsing and normalization of field values.
Back to list