react-redux 中函数的参数mapStateToProps
和mapDispatchToProps
参数有什么区别connect
?
mapStateToProps 与 mapDispatchToProps
IT技术
reactjs
redux
react-redux
mapstatetoprops
mapdispatchtoprops
2021-05-17 23:55:52
3个回答
mapStateToProps
是一个用于向组件提供存储数据的函数,而mapDispatchToProps
是用于向组件提供动作创建者作为props的函数。
根据文档:
如果
mapStateToProps
指定了参数,新组件将订阅 Redux 存储更新。这意味着任何时候 store 更新,mapStateToProps
都会被调用。的结果mapStateToProps
必须是一个普通对象,它将被合并到组件的 props 中。将
mapDispatchToProps
每个动作创建者包装到调度调用中以便可以直接调用它们,将合并到组件的props中。
一个简单的例子是
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return { addTodo: bindActionCreators(addTodo, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Todos);
用一个非常简单的术语来说,
mapStateToProps:它将 redux state 连接到 react 组件的 props。
mapDispatchToProps:它将 redux 操作连接到reactprops。
一个非常简单的例子:(我希望你明白我的意思)
// 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);
用非常简单的话来说:
mapStateToProps
当您想从组件中获取全局状态的值时调用
function mapStateToProps(state) {
return {
message: state.message
};
}
全局状态的值只有在动作的帮助下才会改变。所以如果你想改变全局状态的值,你需要一个动作。 mapDispatchToProps
用于绑定组件中的动作。
其它你可能感兴趣的问题