【问题标题】:How do I get access to the global state in mapDispatchToProps in redux?如何在 redux 中访问 mapDispatchToProps 中的全局状态?
【发布时间】:2017-05-31 18:39:37
【问题描述】:

我想分派一个操作来使用当前登录的用户更新我的应用程序的全局状态。当用户单击按钮时,会触发在mapDispatchToProps 中注册的事件处理程序,然后我想调度一个操作 (article.updateAuthor(currentUser))。但是,在mapDispatchToProps 中,我无法访问状态来获取当前用户,并且我不想随意将当前登录的用户传递给组件道具——只传递给上面的点击事件,这将然后将用户数据传递给调度的操作。

我知道我可以使用 redux thunk 分派一个动作,这让我可以访问状态。然而,这似乎相当沉重,因为没有进行 API 调用。

以前有人遇到过这个问题吗?

【问题讨论】:

    标签: javascript redux redux-thunk


    【解决方案1】:

    在react-redux 提供的connect 函数中,您可以使用四个可选参数:

    • mapStateToProps
    • mapDispatchToProps
    • mergeProps(这个会给你你想要的)
    • options

    来自mergeProps的文档:

    如果指定,则传递 mapStateToProps() 的结果, mapDispatchToProps() 和父道具。简单的对象你 从它返回的内容将作为道具传递给被包装的组件。你 可以指定这个函数来选择一个基于状态的切片 props,或将动作创建者绑定到 props 中的特定变量

    因此,在您的情况下,您将使用 mapStateToProps 来访问您需要的全局状态的任何部分。结果将作为stateProps 参数传递给mergeProps。

    在mergeProps 中对这个状态做你需要做的事情,使用dispatchProps 的结果(或从中解构dispatch)并在你想要连接的组件中返回你需要的对象。

    【讨论】:

      【解决方案2】:

      您可以考虑导入您的商店并使用store.getState(),这样您就可以访问您的“全球”商店。

      但请记住,不推荐使用这种方法,如果您使用的是connect,您应该使用@markerikson 回答所建议的mergeProps。

      getState()

      返回应用程序的当前状态树。它等于 store 的 reducer 返回的最后一个值。 Source.

      伪代码:

      import store from 'store'
      store.getState().yourReducer.user.current
      

      【讨论】:

      • 根据redux.js.org/docs/faq/…,这不是推荐的方法。
      • @markerikson 感谢您的评论,我已经编辑了我的问题。
      【解决方案3】:

      你不能。 mapDispatch 故意不授予对状态的访问权限,因为您通常使用 mapDispatch 创建绑定函数,并且基于状态这样做会不断导致这些函数在状态更改时重新创建。

      如果你真的想要这样做,你可以使用connect 的第三个参数,称为mergeProps,但这通常只能作为最后的手段。

      推荐的方法是:

      • 提取mapState中的相关数据,并让组件调用this.props.someFunction(this.props.someRelatedValue)
      • 使用 thunk 并访问其中的状态

      总体而言,在 thunk 中访问状态是一种完全有效且受支持的功能。有些人提出了这样做是否是个好主意的担忧,我在我的博文Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability 中解决了这些担忧。

      【讨论】:

      • 为什么要把mergeProps作为最后的手段? Dan Abramov 有一个关于使用 thunk 简单地访问全局状态的警告说明。你能解决这个问题吗? “不要滥用这种模式。当有可用的缓存数据时,它有助于摆脱 API 调用,但它不是构建业务逻辑的一个很好的基础。如果你只使用 getState() 有条件地分派不同的行动,请考虑将业务逻辑放入减速器中。” stackoverflow.com/questions/35411423/…
      • mergeProps 最常见的用途是创建关闭 Redux 状态值的函数。但是,mergeProps 会在每次状态变化时重新运行,从而每次都创建新的函数。对于创建函数以及它们是新引用这一事实来说,这都是一个性能问题,因为这些会导致浅层相等检查失败(包括PureComponent 和shouldComponentUpdate)。至于 Dan 的 cmets,我在我链接的博文中提到了他们。
      【解决方案4】:

      在mapDispatchToProps中无法访问状态,这很荒谬。

      还有一个redux的替代品,Dynadux,简单又解决了Redux的繁琐。

      此外,可以在没有 Thunk 的情况下从 reducer 中触发 ispatches。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-08-01
        • 2023-03-22
        • 1970-01-01
        • 2023-03-23
        • 2018-06-26
        • 2019-02-11
        相关资源
        最近更新 更多