A quick reference guide to help new React-Redux users

Concepts to be covered: Provider, connect, mapStateToProps, mapDispatchToProps, action creators

React Redux provides <Provider />, which determines the Redux store available to all components that it wraps. The store prop is necessary and is really what dictates the store that components will access.

<Provider store={store}>
  <App />
</Provider>

connect is a function that actually connects your component to the store that we assigned in <Provider>. It accepts two parameters, mapStateToProps and mapDispatchToProps (we'll address these next). connect() returns a higher order component (HOC) that wraps your component to give it access to the props we want it to get from Redux. We'll go over HOC's later in the course. It usually looks like this:

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent)

It may help to see what is going on more broken out, like so:

// connect returns a function (also called a HOC)

const returnedHOC = connect(mapStateToProps, mapDispatchToProps)

// we then invoke that function (HOC), passing in our component

const componentWithPropsFromRedux = returnedHOC(MyComponent)

// finally, we export the resulting component from our file

export default componentWithPropsFromRedux;

mapStateToProps is a function and the first parameter that connect() accepts.

Pop Quiz: is mapStateToProps a callback function?

You can declare it using the function keyword or as an arrow function, it doesn't matter. The first argument mapStateToProps takes is the entire store state (often state or reduxState). Since we declare this function within the component file I find it least confusing to call the argument reduxState so that you don't confuse it with component state.

mapStateToProps should return an object. This object should declare what properties we want to add to props on our component and have accurate corresponding values.

function mapStateToProps(reduxState){
  return {
    user: reduxState.user
  }
}

export default connect(
  mapStateToProps
)(MyComponent)

Note: if you don't need any values from redux state on props and just want a component to be able to dispatch actions you can pass null in place of mapStateToProps and then pass your mapDispatchToProps.

export default connect(
  null,
  mapDispatchToProps
)(MyComponent)

mapDispatchToProps can take two forms: a function or an object. The React-Redux docs recommend using the object form so we will focus on it. Know that either way - function or object form - results in an object with multiple methods being passed into connect. These methods are the action creators that you have likely declared within a separate actionCreators.js file or within your reducer.js.

You should import your action creators at the top of the file and then package them into an object that you pass as the second argument to connect().

import { actionCreator1, actionCreator2, ... } from "../dux/someReducer"

...

export default connect(
  mapStateToProps,
  { actionCreator1, actionCreator2, ... }
)(MyComponent)

You might also see it noted like this:

import { actionCreator1, actionCreator2, ... } from "../dux/someReducer"

...

const mapDispatchToProps = {
  actionCreator1,
  actionCreator2,
  ...
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent)

This results in adding your action creators to the props object so that you can invoke them like this.props.actionCreator1() within the connected component.

Action Creators are not necessarily specific to React-Redux but we introduced them with it so I will cover them here. Action creators are simply the functions that we dispatch to the store. You'll recall that in plain Redux we did something like this:

store.dispatch({
  type: SOME_TYPE,
  payload: someValueHere
})

Our action creators are essentially just assigning this to a function.

function actionCreator1(){
  return {
    type: SOME_TYPE,
    payload: someValueHere
  }
}

You'll notice that our function returns an object identical to the object we passed into dispatch. But where does dispatch come in? When we use the object shorthand form of mapDispatchToProps, connect will automatically bind our action creators to the dispatch function call so that we can invoke our action creators directly without calling dispatch().

We usually declare these functions in the reducer.js that they will affect or in a separate actionCreators.js file for good organization.

Answer to pop quiz: Yes. Remember, a callback function is simply a function that is passed into another function as an argument