Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

247
Views
mapStateToProps vs mapDispatchToProps

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

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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);
over 4 years ago · Santiago Trujillo Report

0

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);
over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!