The Ultimate Manager: Redux III mapStateToProps + mapDispatchToProps

Rewind

In the first and second part of this series, I introduced what Redux is, why we use it, and how state gets updated in Redux through the use of actions and reducers.

In this third installment, I will be taking a necessary and deeper look into how Redux can store and update state for all components in a ReactJS application.

Let's get started...

Redux lets us update state through the use of actions and reducers, yes. Yet, how do we get the data to those two key pieces?

Well, we can use the functions mapStateToProps(), mapStateToDispatch(), and connect()!

These functions, most usually stored and called in your App.js file, do a great job of connecting the Redux store to our App component.

Let's take a look at some code in an example App class component:

// App.js

import React from 'react'
import {connect} from 'react-redux'
import { BrowserRouter as Router, Route} from 'react-router-dom'
import Navbar from './Navbar'
import BookmarkForm from './BookmarkForm'

At the top of the App component, we import some very important items:

• We import React's component from the React library, so that our App component can access methods and other key behavior.
• We then import connect() from the React-Redux library. (We will discuss this in a moment!)
• We also import the component "Navbar" from our application to render a navigation bar and the component "BookmarkForm" to render our form to create bookmarks.
• Finally, we import BrowserRouter with the elements "Router" and "Route" which help to standardize our route paths within the navigation bar.

// App.js
class  App extends React.Component {
  componentDidMount(){
    this.props.getBookmarks()
  }

  render() {
      return (
          <div className="App">
            <Router>
              <Navbar/>
                <Route exact path="/bookmarks/new" render={routeProps => <BookmarkForm {...routeProps} createBookmark={this.props.createBookmark}/>}/>
           </Router>
          </div>
    ) 
  }
}

As we move down the example code, we then declare our class component "App" which extends our imported React component. As in all class components, we call a render() method to return our JSX code(the bookmark form and the navigation bar) to portray our code to the browser.

However, above the render() method, we call the lifecycle method, "componentDidMount()". This method is in charge of mounting something to the DOM. In our case, we call on the props of our App component (hence, "this.props") and invoke a method "getBookmarks()". So as to each time our application renders to the browser, our DOM will display our collection of bookmarks.
For more information on lifecycle methods, click here.

//App.js
const mapStateToProps = (currentState) => {
  return {
    bookmarks: currentState.bookmarks
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    createBookmark: (bookmark) => dispatch(createBookmark(bookmark))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Toward the end of our App component, we see a few new methods:

1. mapStateToProps()
2. mapDispatchToProps()
3. connect()

mapStateToProps()

mapStateToProps() takes in the entire, current state of the store as an argument and selects a part of that state from the Redux store to be returned and eventually connected to the App component itself. Importantly, mapStateToProps() will be called every time the Redux store state changes. Also, it returns the state from the store as a plain JS object. The syntax of a JS object, specifically the key-value pairs, sets each value as a prop for the App component. So:

bookmarks: currentState.bookmarks

"bookmarks" represents the key and "currentState.bookmarks" is the value of that key. We can now call on bookmarks to encompass all of the store's state that is bookmarks. I know that might sound confusing, but we see this in action in mapDispatchToProps(). Let's look.

mapDispatchToProps()

mapDispatchToProps() takes an argument of "dispatch". Dispatch is a function of the Redux store and it is the only way to trigger a state change. mapDispatchToProps() also returns a plain JS object. In these key-value pairs, we set a key to the name of an action object, "createBookmark". For its value, we use an arrow function syntax to pass a parameter to be dispatched with the action object we declared as the key to tell the reducer to do what the action describes to change. Why do we do this? So each declared key-value pair becomes a prop in our App component to be used within our other components.

connect()

Finally, how do we ensure the two above functions do their job? We use connect()! We use this function to access the Redux store by passing in our mapStateToProps first and then our mapDispatchToProps. At the end, we wrap the name of our component to which we want to use the passed arguments: "App".

Recap

Together, these very complex elements allow us to use the state stored in the store by converting the state to props to be held on to by our App component. We then dispatch each action we have previously created so that we may call these actions in different components of our application.

Vocabulary

1. the store: From Redux, it is the single location where state is stored.
2. dispatch: a function given to us from the store; it takes an action as argument and tells the reducer to do something with that action. Dispatching actions yield updates to the store.
3. mapStateToProps(): selects a portion of the state from the store to be connected to the App component and assigns it to key-value pairs to be used later.
4. mapDispatchToProps(): dispatches actions to the store to trigger state changes. Returns a JS object with key-value pairs to each portray a separate prop to be passed on by the App component.
5. connect(): a function that accesses the store for us and connects it to our App component. It takes in mapStateToProps() and mapDispatchToProps() as arguments.
6. react-redux: a library package that allows us to use Redux's state management in a ReactJS application; provides built in methods and functions (like connect()!)
7. props: data passed from parent component to children components.
8. state: data that is mutated in an application.
9. actions: plain JS objects that contain information about what in the state should be changed / will be changed.

Thank you for reading along. Comment below for any questions, intrigues + more! ⭐