How do Components Interact with Each other in React?

React App can be consist of enormous interactive React components. Communication between these components is an essential aspect of the UI architecture, especially with large and more complex web applications. These components are functional in nature: that is, they receive information through arguments and pass information in their return. This is called unidirectional data flow.

Let us discuss 3 prime ways of communication between React components

1. Props mechanism
2. Context API
3. React-Redux/Redux

Props in React

React Components accept input called Props. This is an optional parameter. In the functional component, we can access this object as props whereas in Class Component we can use this.props to access props object. Let us dive deep into props to understand how they work and how do they used to pass data between various components. We will discuss different scenarios.

Passing data from Parent to Child:

In React app, one component can pass data to their child components through props, similar to arguments to a function. This is an optional property, we can send to any React Component. It is the simplest way of communication between components in React.

In the above example, <Employee> is a parent component that passes the employee name as an argument in the <EmployeeDetails> child component. In the child component, the empName value is accessible using a special property called props. To access the empName value in the child Component, we can write props.empName. This is a read-only property in the child component and every time when employee name gets changed, this child component also gets re-render. Children cannot update props. If you attempt to directly modify a prop in a child component, you will see the error in the console.

Passing data from Child to Parent Component:

As React supports unidirectional data flow, we cannot pass any data directly from the child to the parent component. To achieve this, we have to use a slightly different approach here. First, we have to pass a method of parent component to child component as props. In the give example, <Employee> Component passes onChangeName method to the <EmployeeDetails> Component.

Here, the Child component<EmployeeDetails> can trigger a function on button click which is a functional props received from the parent component. The essence of the functional prop is that when the button is clicked, the function(onChangeName) passed in by the Employee component is executed. Thus, child-to-parent communication is achieved.

Passing data between Sibling Components:

In sibling components, we can use multiple ways to send data. We can use a combination of the above two methods (use callback and use of props). Other approaches are ContextAPI and Redux.

Context API in React

In large or complex React app, passing data using props is very cumbersome for certain reasons. ContextAPI provides a better way to pass data between components without explicitly passing props. It provides a way to pass data through the component tree without having to pass props down manually at every level. Using ContextAPI, We can easily pass data from a component to any deeply nested components in the component tree.

In the above app, we have used React contextAPI feature to pass data from <Employee> component to the grandchild <EmployeeProfile> component. During this communication, data is not passed using props.

React-Redux/Redux

Redux is a third-party library used for robust communication between components at the app level. It is a state management library to store the state of the App in one place and manipulate it from anywhere in the App. As it is a JavaScript library independent from React, we can use Redux with Angular, Vuejs, or even with vanilla JavaScript.

As the data is stored in a separate state defined at one place, any component can set or update the state and other components will capture it. In this scenario, the child component can set or update a state in the store and it will be captured by the parent component too.

To setup Redux inside a React Application, you have to install the following packages

Setup Your Redux Store

Redux store is a plain JavaScript object. We can manage our App data in Redux Store using this plain JavaScript Object. Our App data will be comprised of arrays and objects which reside in Redux Store. That means you may not put other things into the Redux state — no class instances, built-in JS types like Map / Set Promise / Date, functions, or anything else that is not plain JS data.

To set up the redux store, we will use createStore API that will create the store. This method accepts customReducer as a parameter. This store will be used available to attach with React App tree.

In the index.js file, we will use a special react-redux component named <Provider> to attach Redux Store with React App tree.

Designing Actions

After the initial configuration of the Redux Store, We have to design Actions as an event that describes the initialization of action on the store. Action is a JavaScript plain object. It has a special key called type. The type key is used to define the Type of Action that you want to initiate in the store.

You can think of an action as an event that describes something that happened in the application. Along with the Type key, we normally put any extra data needed to describe what’s happening into the action.payload field. This could be a number, a string, or an object with multiple fields inside. Basically actions.payload is the data which we want to pass to the store.

Refer following examples of action object.

Writing Reducers

Once we are ready with basic store setup and actions. We can wire up our first reducer. Reducer is a pure JavaScript function in Redux, which is responsible to update the Redux store. It takes the current state of the store and an action object as arguments. Based on the type key of the action object, Reducer decides what to update in the state of the store. Reducer returns a new State of the Store as a result.

In Other words, (state, action)=>newState

Rules of Reducers​

While working with Reducers following rules should be followed:

• They should only calculate the new state value based on the state and action arguments
• They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
• They must not use any asynchronous logic or other “side effects”

Connect to Redux Store

After setting up Redux Store, Actions, and Reducer, our redux state management system is ready to work with any complex React application. But all these components of the Redux store won’t do anything by themselves.

To connect with Redux Store, React-Redux library provides connect() function. This connect() function is a higher-order component that connects React component to the Redux store.

In above code, mapStateToProps and mapDispatchToProps are use to refer stateProps and dispatchProps, respectively. A mapStateToProps function is used to subscribe to the Redux store. It means that at any time the store get updated, this function will gets the new state of the Redux store. This function returns a plain object which comprised of the update state of store. Our components can access this update state of store using props. If you don’t want to subscribe to store updates, pass null or undefined in place of mapStateToProps.

Similarly, mapDispatchToProps is a second argument of the connect function. If mapDispatchToProps is declared as a function taking one parameter, it will be given the dispatch of your store. It is expected to return an object. Each field of the object should be a function, by calling these functions it is expected to dispatch an actions to the store.

Above snapshot gives you a holistic view of React Redux State Management System, where View represents the React Components which triggers Actions to the Redux store using Dispatchers. It will be further handled by the Reducers which read the current state and action’s type received from Dispatcher to update the state of the store. Finally it returns the updated new state of the store which React component receives as props

Conclusion

Finally, we have discussed almost all widely used methods in React world for the communication between different components. First two methods are mostly applicable when parent and its child components are communicating with each other. Also, we have seen that Redux store can be used when we want to achieve component communication in the large DOM Tree.