我试图了解 react-redux 的 connect 方法,以及它作为参数的函数。特别是 mapStateToProps()
.
按照我的理解,mapStateToProps
的返回值将是从状态派生的对象(因为它存在于存储中),其键将传递给您的目标组件(组件连接应用于) 作为 Prop 。
这意味着目标组件使用的状态可能与存储在商店中的状态具有截然不同的结构。
问:这样可以吗?
问:这是预期的吗?
问:这是一种反模式吗?
最佳答案
是的,没错。它只是一个辅助函数,可以更简单地访问您的状态属性
假设你的应用中有一个 posts
键 state.posts
state.posts //
/*
{
currentPostId: "",
isFetching: false,
allPosts: {}
}
*/
和组件 Posts
默认情况下 connect()(Posts)
将使所有状态 Prop 可用于连接的组件
const Posts = ({posts}) => (
<div>
{/* access posts.isFetching, access posts.allPosts */}
</div>
)
现在,当您将 state.posts
映射到您的组件时,它会变得更好
const Posts = ({isFetching, allPosts}) => (
<div>
{/* access isFetching, allPosts directly */}
</div>
)
connect(
state => state.posts
)(Posts)
mapDispatchToProps
通常你必须写 dispatch(anActionCreator())
使用 bindActionCreators
你也可以更轻松地做到这一点
connect(
state => state.posts,
dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
)(Posts)
现在你可以在你的组件中使用它
const Posts = ({isFetching, allPosts, fetchPosts, deletePost }) => (
<div>
<button onClick={() => fetchPosts()} />Fetch posts</button>
{/* access isFetching, allPosts directly */}
</div>
)
actionCreators 更新..
actionCreator 示例:deletePost
const deletePostAction = (id) => ({
action: 'DELETE_POST',
payload: { id },
})
所以,bindActionCreators
只会执行您的操作,将它们包装到 dispatch
调用中。 (我没看过redux的源码,但是实现可能是这样的:
const bindActionCreators = (actions, dispatch) => {
return Object.keys(actions).reduce(actionsMap, actionNameInProps => {
actionsMap[actionNameInProps] = (...args) => dispatch(actions[actionNameInProps].call(null, ...args))
return actionsMap;
}, {})
}
关于javascript - 了解 React-Redux 和 mapStateToProps(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38202572/