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)

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)

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
  }
}

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))

  }
}

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)

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!!!***