在Util文件中访问Redux Store

时间:2017-09-28 22:24:22

标签: reactjs redux react-redux

TLDR:我希望能够在外部“Util”文件中获取最新的Redux State。我怎么能这样做?

假设我有一个播放列表..在应用的许多不同区域,您可以“开始”播放列表。所以在“Util”文件中我有“startPlaylist”函数,所以我不必在很多地方编写函数,只能在一个地方编写。

问题在于,如果我在播放列表运行时对播放列表进行了任何更改,“playNextPageInPlaylist”功能将不会收到播放列表的任何更新。

我可以做什么和更改,以便我的Util文件中的函数将获得最新的Redux状态?

我在7个不同的区域中有startPlaylist函数,它涉及的函数(都在Util文件中)非常复杂..在所有7个文件中复制和粘贴它是没有意义的。

感谢您的帮助

React.Component File 1

import { startPlaylist } from '../util/EntitiesUtil';

start1() {   
  startPlaylist( store.playlists[0] ); 
}

React.Component File 2

import { startPlaylist } from '../util/EntitiesUtil';

start2() {
  startPlaylist( store.playlists[0] );
}

EntitiesUtil.js

export function startPlaylist( playlistFromStore ) {
  // do stuff
  playNextPageInPlaylist( playlistFromStore );  // keeps grabbing next page on a timer
}

3 个答案:

答案 0 :(得分:4)

你有几个选项,我看到的主要选项是:

  1. 将商店传递给该功能(bah请不要这样做!)。
  2. 您可以编写自己的中间件来处理某些操作类型 如果需要可以发送其他行动(你也可以免费获得 访问整个商店!)。
  3. 我认为第二种选择是理想的,因为您希望util做出反映在商店中或需要商店内容的东西。所以基本上你的util想要成为redux流量的一部分!
    好吧,它不是component所以你不能连接"但是它可以(并且应该在我看来)位于你的行动和减速器之间的广告中间件。

    您可以阅读有关中间件here的信息 我会为您提供一个用例示例,但您没有发布任何有意义的代码。

    修改
    您的评论的后续内容:

    非常基本。

    1. 你有一个永不改变的功能的签名,只需看看 docs(它使用 currying, 这是你应该学习的另一个js主题)
    2. 您需要在创建时将其注入商店 applymiddleware(与使用redux-thunk时的情况相同 中间件本身)。
    3. 我真的建议您查看redux-thunk the whole 11 lines of it的源代码 你可以从中学到很多东西。

答案 1 :(得分:1)

我相信store有一种getState()方法可供您使用。

导入您创建的商店,然后致电store.getState()

从redux的主站点查看此示例:

http://redux.js.org/docs/api/Store.html#example

function select(state) {
  return state.some.deep.property
}

let currentValue
function handleChange() {
  let previousValue = currentValue
  currentValue = select(store.getState())

  if (previousValue !== currentValue) {
    console.log(
      'Some deep nested property changed from',
      previousValue,
      'to',
      currentValue
    )
  }
}

答案 2 :(得分:0)

在使用公司ui react库时,我们遇到了类似的问题,其中状态创建委托给了核心库。因此,将商店导出为公共变量不是我们的选择。

但是,有一种可怕的“公共静态变量”会用您的根减速器或“切片减速器”进行更新。

因此,您应该使用'let utilStore'变量创建一些'store-util.tsx',并导出一些setter(用于reducer)和getter(对于任何实用程序函数)功能。