了解 React-Redux 中的 mapStateToProps 和 mapDispatchToProps

Question

I'm trying to understand the connect() method of react-redux . Usually it takes two function as argument: mapStateToProps() & mapDispatchToProps() . I write a example for myself, here is connect() section of my User component:

//imports...

class User extends Component {
    /* constructor, JSX, other functions... */
}
const mapStateToProps = (state) => {
   return {
     users: state.UserReducer
   };
};

const mapDispatchToProps = (dispatch) => ({
  deleteUser: (id) => dispatch(deleteUser(id))
});

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

According to Docs I have taken the following two conclusions about mapStateToProps() & mapDispatchToProps() :

• mapStateToProps() : it makes that state available in our component. ie it is used to pass reducer to component.
• mapDispatchToProps() : it maps component relevant functions to action functions, ie with this function We can perform the action that we want in our component .

is my conclusions correct?

Answer 1

React components accept data from outside via props . maptStateToProps and mapDispatchToProps , literally, pass the selected state properties and actions that are needed inside your component as props. The state values and actions passed to the component are available in the props of the component. In your example, you can use this.props.users or this.props.deleteUser() .