javascript - 了解 React-Redux 和 mapStateToProps()

Question

我试图了解 react-redux 的 connect 方法，以及它作为参数的函数。特别是 mapStateToProps().

按照我的理解，mapStateToProps 的返回值将是从状态派生的对象(因为它存在于存储中)，其键将传递给您的目标组件(组件连接应用于) 作为 Prop 。

这意味着目标组件使用的状态可能与存储在商店中的状态具有截然不同的结构。

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

Answer 1

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

假设你的应用中有一个 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)

ma​​pDispatchToProps

通常你必须写 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;
  }, {})
}