mapStateToProps vs mapDispatchToProps

Question

What's the difference between mapStateToProps and mapDispatchToProps arguments to the connect function in react-redux?

Answer 1

mapStateToProps is a function that you would use to provide the store data to your component, whereas mapDispatchToProps is something that you will use to provide the action creators as props to your component.

According to the docs:

If mapStateToProps argument is specified, the new component will subscribe to Redux store updates. This means that any time the store is updated, mapStateToProps will be called. The results of mapStateToProps must be a plain object, which will be merged into the component’s props.

With mapDispatchToProps every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

A simple example would be

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { addTodo: bindActionCreators(addTodo, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

Answer 2

In a very simple term,

mapStateToProps: It connects redux state to props of react component.

mapDispatchToProps: It connects redux actions to react props.

A really light example: ( I hope, you know what I mean)

// state
const mapStateToProps = state => {
  return { lists: state.lists };
};

// props
const mapDispatchToProps = ({ lists }) => (
  <ul>
    { 
      lists.map(el => (
        <li key={ el.id }>
          { el.heading }
        </li>
      )
    }
  </ul>
);

// Now, connect state to prop
const List = connect(mapStateToProps)(mapDispatchToProps);

Answer 3

In very simple terms:

mapStateToProps is called when you want to get the value of the global state from your component

function mapStateToProps(state) {
  return {
    message: state.message

  };
}

The value of the global state is only changed with the help of an action. So if you want to change the value of global state you need an action. mapDispatchToProps is used to bind action in your component.