DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Redux: What is Connect()?
Adriana DiPietro
Adriana DiPietro

Posted on

Redux: What is Connect()?

Hello!

Today we will be discussing a very import piece of code from Redux: connect()!

Let's take a look at some questions to think about in the back of our minds as we dive in!

πŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’ΏπŸ’Ώ

Questions

  1. What is Redux?
  2. How does Redux store state?
  3. Where does Redux store state?
  4. How do components relate/connect in React?
  5. How do components pass data + state in React?
  6. How do components receive data + state in Redux?

What is Connect()?

Connect() is a function given to us from Redux. It does two (2) major things:

  1. accesses the store for us.
  2. connects state + dispatch to a component for us as props.

Connect() Syntax

function connect(mapStateToProps, mapDispatchToProps)(ComponentName)
Enter fullscreen mode Exit fullscreen mode

Connect() takes in two (2) or more optional parameters, by convention they are named:

  • Param #1: mapStateToProps
  • Param #2: mapDispatchToProps

Connect() wraps a component in which mapStateToProps + mapDispatchToProps' return values will be passed to:

(ComponentName)
Enter fullscreen mode Exit fullscreen mode

mapStateToProps()

mapStateToProps() is a function given to us from Redux. It selects the part of state from the Redux store to be connected as a prop to the wrapped Component in connect().

mapStateToProps() takes in the current state as an argument and returns a JavaScript object with key-value pair(s).
Each key becomes a separate prop to be used within the connected component.

Here is an example:

const mapStateToProps = (state) => {
  return {
    users: state.users
  }
}
Enter fullscreen mode Exit fullscreen mode

Now, instead of calling "state.users", we can call "users" and it encompasses the state from the Redux store to be used as props!

mapDispatchToProps()

mapDispatchToProps() is a function given to us from Redux. It selects an action and dispatches it to be returned as props.

mapDispatchToProps() takes in dispatch as an argument and returns a JavaScript Object with key-value pair(s).
Each key becomes a separate prop as well!

You will notice this functionality is similar to mapStateToProps()! You are not wrong. The difference lies in the function's name: one maps the Redux state to props and the other maps dispatched action functions to props!

Here is an example:


const mapDispatch = (dispatch) => {
  return {
    loginUser: (credentials) => dispatch(loginUser(credentials))

  }
}

Enter fullscreen mode Exit fullscreen mode

Connect() Returns

Connect() returns the value of mapStateToProps + mapDispatchToProps and passes it to the component it is wrapping.

Let's look at connect() all put together:

export default connect(mapStateToProps, mapDispatch)(Login)

Enter fullscreen mode Exit fullscreen mode

Our Login React component now has access to the "users" state as props and the dispatched action "loginUser" as props.

We can call these props throughout a component without fail; this immensely dries up our code and enhances readability.

πŸ“€πŸ“€πŸ“€πŸ“€πŸ“€πŸ“€πŸ“€πŸ“€πŸ“€πŸ“€πŸ“€πŸ“€

Recap

*** The connect() function connects a React component to a Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store..all as props!!!***

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!