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
}
答案 0 :(得分:4)
你有几个选项,我看到的主要选项是:
我认为第二种选择是理想的,因为您希望util
做出反映在商店中或需要商店内容的东西。所以基本上你的util
想要成为redux
流量的一部分!
好吧,它不是component
所以你不能连接"但是它可以(并且应该在我看来)位于你的行动和减速器之间的广告中间件。
您可以阅读有关中间件here的信息 我会为您提供一个用例示例,但您没有发布任何有意义的代码。
修改强>
您的评论的后续内容:
非常基本。
js
主题)applymiddleware
(与使用redux-thunk
时的情况相同
中间件本身)。我真的建议您查看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(对于任何实用程序函数)功能。