了解React-Redux和mapStateToProps()

我试图理解react redux的connect方法,以及它作为参数的函数。特别是MapStateTops()

按照我的理解,mapStateToProps的返回值将是一个从state派生的对象(因为它存在于存储中),其键将作为道具传递给目标组件(应用组件连接)

这意味着目标组件所使用的状态可能与存储在存储中的状态具有完全不同的结构

问:这样可以吗?
问:这是预期的吗?
问:这是一种反模式吗

是的,没错。它只是一个帮助函数,可以更简单地访问状态属性

假设你的应用程序中有一个postsstate.posts

state.posts//
/*    
{
currentPostId:“”,
isFetching:false,
所有帖子:{}
}
*/

和组件Posts

默认情况下,connect()(Posts)将为连接的组件提供所有状态道具

const Posts=({Posts})=>(
<div>
{/*access posts.isFetching,access posts.allPosts*/}
</div>
)

现在,当您将状态映射到组件时,它会变得更好

constposts=({isFetching,allPosts})=>(
<div>
{/*访问正在获取,所有直接发布*/}
</div>
)
连接(
state=>state.posts
)(员额)

mapDispatchToProps

通常您必须编写dispatch(anActionCreator())

使用bindActionCreators您也可以像

连接(
state=>state.posts,
dispatch=>bindActionCreators({fetchPosts,deletePost},dispatch)
)(员额)

现在您可以在组件中使用它了

const Posts=({isFetching,allPosts,fetchPosts,deletePost})=>(
<div>
<button onClick={()=>fetchPosts()}/>fetchPosts</button>
{/*访问正在获取,所有直接发布*/}
</div>
)

actionCreators的更新

actionCreator示例:deletePost

constdeletePostAction=(id)=>({
操作:“删除帖子”,
有效负载:{id},
})

因此,bindActionCreators将只执行您的操作,将它们包装到dispatchcall中。(我没有阅读redux的源代码,但实现可能如下所示:

const bindActionCreators=(操作,调度)=&gt{
返回Object.keys(actions).reduce(actionsMap,actionNameInProps=&gt{
actionsMap[actionNameInProps]=(…args)=>分派(操作[actionNameInProps].call(null,…args))
返回操作SMAP;
}, {})
}

发表评论