Understanding React-Redux and mapStateToProps（）

javascript reactjs redux react-redux

2022-08-30 00:29:35

我试图理解react-redux的连接方法，以及它作为参数的函数。特别。mapStateToProps()

按照我的理解，返回值将是一个从状态派生的对象（因为它位于存储中），其密钥将作为 props 传递给目标组件（组件连接应用于）。mapStateToProps

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

问：这样可以吗？
问：这是预料之中的吗？
问：这是反模式吗？

答案 1

是的，这是正确的。它只是一个帮助器函数，具有更简单的方法来访问状态属性

想象一下，你的应用中有一把钥匙postsstate.posts

state.posts //
/*    
{
  currentPostId: "",
  isFetching: false,
  allPosts: {}
}
*/

和组件Posts

默认情况下，将使所有状态属性都可用于连接的组件connect()(Posts)

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

操作创建器的更新。.

操作创建器的示例：deletePost

const deletePostAction = (id) => ({
  action: 'DELETE_POST',
  payload: { id },
})

所以，只会采取你的行动，把它们包装成电话。（我没有阅读redux的源代码，但实现可能看起来像这样：bindActionCreatorsdispatch

const bindActionCreators = (actions, dispatch) => {
  return Object.keys(actions).reduce(actionsMap, actionNameInProps => {
    actionsMap[actionNameInProps] = (...args) => dispatch(actions[actionNameInProps].call(null, ...args))
    return actionsMap;
  }, {})
}

答案 2

问：
答：是的Is this ok?

问：
是的，这是预料之中的（如果您使用的是 react-redux）。Is this expected?

问：
答：不，这不是一个反模式。Is this an anti-pattern?

它被称为“连接”您的组件或“使其智能化”。这是设计使然。

它允许您将组件与状态分离，从而增加代码的模块化程度。它还允许您将组件状态简化为应用程序状态的子集，这实际上可以帮助您遵守 Redux 模式。

可以这样想：存储应该包含应用程序的整个状态。
对于大型应用程序，这可能包含嵌套多层的数十个属性。
您不想在每次通话时都拖着所有这些（昂贵）。

如果没有或一些类似的东西，你会忍不住用另一种方式来提高性能/简化你的状态。mapStateToProps