了解 React-Redux 中的 mapStateToProps 和 mapDispatchToProps

Question

我试图了解react-redux的connect()方法。 通常它需要两个 function 作为参数： mapStateToProps() & mapDispatchToProps() 。 我为自己编写了一个示例，这是我的User组件的connect()部分：

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

根据 文档，我对mapStateToProps()和mapDispatchToProps()得出以下两个结论：

• mapStateToProps() ：它使 state 在我们的组件中可用。 即它用于将reducer传递给组件。
• mapDispatchToProps() ：它将组件相关函数映射到action函数，即使用这个 function 我们可以在我们的component中执行我们想要的action 。

我的结论正确吗？

Answer 1

React 组件通过props接受来自外部的数据。 maptStateToProps和mapDispatchToProps从字面上看，将组件内所需的选定 state 属性和操作作为道具传递。 传递给组件的 state 值和操作在组件的 props 中可用。 在您的示例中，您可以使用this.props.users或this.props.deleteUser() 。