reactjs - 访问 Util 文件中的 Redux Store

Question

TLDR: 我希望能够在外部“Util”文件中获取最新的 Redux 状态。我怎样才能做到这一点？

<小时/>

假设我有一个播放列表..并且在应用程序的许多不同区域中，您可以“启动”播放列表。因此，在“Util”文件中，我有“startPlaylist”函数，因此我不必在许多地方编写该函数，而只需在一处编写该函数。

这样做的问题是，如果我在播放列表运行时对播放列表进行任何更改，“playNextPageInPlaylist”函数将不会收到播放列表的任何更新。

我可以做什么和更改，以便 Util 文件中的函数接收最新的 Redux 状态？

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

感谢您的帮助

<小时/>

React.Component 文件 1

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

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

React.Component 文件 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
}

Answer 1

你有几个选项，我认为主要选项是:

1. 将商店传递给函数(啊，请不要这样做!)。
2. 您可以编写自己的中间件来处理某些操作类型 并且可以根据需要调度其他操作(您还可以获得免费的 访问整个商店!)。

我认为第二个选项是理想的，因为您希望您的 util 执行商店中反射(reflect)的内容或需要商店中的内容。所以基本上你的 util 希望成为 redux 流程的一部分!
好吧，它不是一个组件，所以你不能“连接”它，但它可以(并且在我看来应该是)位于你的操作和 reducer 之间的广告中间件。

您可以阅读有关中间件的内容 here .
我本想为您提供一个用例示例，但您没有发布任何有意义的代码。

编辑
您的评论的后续内容:

这是非常基本的。

1. 你有一个永远不会改变的函数签名，只需看看 docs (它用 currying , 这是您应该学习的另一个 js 主题)
2. 您需要在创建它时将其注入(inject)到商店中 applymiddleware (与您对 redux-thunk 所做的相同，这是一个 中间件本身)。

我真的推荐看一下redux-thunk的源码 the whole 11 lines of it .
你可以从中学到很多东西。