Data Flow in ReactJS

Second installment of my series for junior developers. About me, I come from a non-traditional Computer Science background, am an activist and advocate fighting for diversity and inclusion in the technology space. I blog about technical topics related to , and tech inclusion. JavaScript ReactJS This week I’m writing about data flow in the React eco-system. Before explaining and implementing, we need to know some terms: — are pieces of data that you can pass to . Typically, these are the of . This one way data flow (top to bottom / parent to child) is a main tenet in ReactJS programming. As this data is passed, it does not change. Props Presentational Components children Container Components — stores data that can change. We can read and write to . This object comes from or . State state Redux stateful components As in most of the JavaScript ecosystem, there are multiple ways to implement. I will show you three different ways to display data in your . Presentational Component One way is to pass it as a default prop: React, { Component } 'react'; import from class Address extends Component {render () {return ( {this.props.streetLineOne} {this.props.streetLineTwo} {this.props.state} {this.props.zip} );}} Address.defaultProps = {imgUrl: '/images/icons/map_marker.svg',streetLineOne: '1234 This Way Street',streetLineTwo: 'Apt. 1',state: 'CA',zip: 94703,} export default Address Another, is to pass props via the Parent Component Step 1: Build the child component that will receive props from its parent. Mini-steps involved in this process: import React built ins, map your data in the JSX code you are returning, check what type of data each prop returns, and finally export your child component. import React built ins import React from 'react';import PropTypes from 'prop-types'; map your data in the JSX code you are returning const Address = (props) => {return ({props.showIcon && } {props.location} {props.location.city}, {props.location.state} {props.location.zipCode} );} The code above may seem dense at first, upon breakdown it is pretty simple. There are 3 React components inside of The image component, which is only shown when the boolean returns . showIcon true A that contains the street address in div props.location Another that contains the locality of the location in div props.location.city props.location.state props.location.zipCode So the component is expecting a location property. So where is the props object coming from? As you will see, this data object is being passed down from its’ parent . check what type of data each prop returns Address.propTypes = {location: PropTypes.object.isRequired,showIcon: PropTypes.bool,iconClassName: PropTypes.string,}; export your newly built child component Address; export default Step 2: Build its Parent Component. Mini-steps involved: import root style sheet, CSS tools, declare your new parent component and pass down to it the data you want to display via props, export your new parent component. import React built ins, style sheets and CSS tools React 'react'; withStyles '../../../core/isomorphic-style-loader/withStyles'; s './LocationInfoCard.scss'; Address '../../Location/Address'; Phone '../../Location/Phone'; import from import from import from import from import from declare your new parent component and pass down to it the data you want to display via props. const LocationInfoCard = (props) => {const { location } = props //location is a key in the props object return ( );} export your new parent component withStyles(s)(LocationInfoCard) export default Our props / data object is now dynamically being piped in to . We will see in the last example how this parent component is getting this object. The is a . The props object parameter it receives has a key inside it called . We can access which will help us write shorter syntax. Here is a clear explanation from stateless functional component location location via object destructuring the Mozilla documentation. var myObj = {p: 42, q: true};var {p, q} = myObj; console.log(p) = 42 In the case above, we can write instead of . Similarly, in , we can now access this same property by using just its key, . p myObj.p props.location location Inside of there are 2 custom components: and . It may seem confusing that we are only passing the prop but remember, we mapped those data object properties when we wrote the child component, , even though I did not show you the example, you can imagine that the same applies to location Last but not least, the third example I’m going to show you is how **_props_** are passed down using a data store like Redux. react-redux In the infographic above, we can see the that is the bread and butter of React applications. To keep it simple, high level and to solidify understanding of data flow in React, we are going to focus on the process highlighted by the red box. unidirectional data flow Step 1: Connect your Container Component to Redux npm install --save react-redux We are going to need a function called . React-redux allows us to connect our React application to Redux which will then allow us to connect to Redux’s data store where we can access . connect state means inputs that are being tracked and can be changed*. Some examples of state changes are variable reassignment, and user interactions (clicks, submitting forms, mouse moves — events). State — React 'react'; { connect } 'react-redux'; import from import from Typically you have to create and In our app, let’s assume this has already been built out for us to so we can understand in bite size pieces how data flows in React. actions reducers. Step 2: Import the component that is going to receive the prop. location LocationInfoCard './LocationInfoCard'; import from Step 3: Declare your function (see definition by ReduxJS documentation below) mapStateToProps To use , you need to define a special function called that tells how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping. connect() mapStateToProps mapStateToProps = state => ({location: state.location,}); const Here we can see that the function is creating a new object that has a property called which we are then passing to mapStateToProps location = {path: '/location-info',action: () => { ConnectedLocationInfoCard =connect(mapStateToProps(LocationInfoCard); {component: ( ),};},}; export const locationInfoCard const return Don’t feel overwhelmed by the dense code above. We’ll take it line by line to understand what is happening. We can see that a new constant called is being exported using . locationInfoCard ES6 syntax This constant contains an object that has a property called and a called . is where we will see the child components of displayed. path method action /location-info What’s more interesting is the method. This is the heart of our newly connected container component. takes as an argument and returns a new route component. Now, when we go to this route, we will be able to access our application’s state and along with that its properties. action mapStateToProps LocationInfoCard To recap, I showed you 3 ways to pipe in data to your React component: Pass data in using default props Pass data down from parent to child components Map state to props using react-redux Hope my explanations were helpful. Feel free to reach out to me via comments.