Reactjs 在React with PreloedState中进行测试：当在函数中手动导入存储时，redux存储将不同步

我正在使用React测试库和jest为React编写测试，在另一个文件导入我的redux存储时，在确定如何为我的redux存储设置预加载状态时遇到了一些问题

我有一个功能可以像这样设置我的商店

store.ts

export const history=createBrowserHistory（）
export const makeStore=（initalState？：any）=>configureStore({
reducer:createRootReducer（历史），
预加载状态：initalState
})
export const store=makeStore（）

还有另一个像这样的js文件

utils.ts

从“状态/存储”导入存储
const userIsDefined=（）=>{
const state=store.getState（）
如果（state.user==未定义）返回false
...
返回真值
}

然后我做了一个类似这样的测试：

utils.test.tsx（renderWithProvider基本上是一个渲染函数，它还将我的组件包装到渲染组件中，请参见：）

描述（“测试”，（）=>{
它（“在定义用户时运行函数”，async（）=>{
const store=makeStore（{user:{id_标记：'1'}}）
const{container}=renderWithProvider(
,
百货商店
);
})
})

然后调用utils.ts中的函数

SomeComponent.tsx

const SomeComponent=（）=>{
if（userIsDefined（）==false）返回（）
...
}

现在。。测试运行时发生的情况似乎是这样的

utils.ts被读取，并从“state/store”读取行导入store，这将在尚未定义用户的位置创建并保存一个store变量

调用utils.test.tsx并运行调用const store=makeStore（{user:{id\u token:'1'}}）的代码

renderWithProvider（）renderesSomeComponent，它反过来调用用户定义的函数

if（state.user==undefined）返回false，因为state.user仍然未定义，我想这是因为utils.ts导入了存储，就像我调用自己的makeStore（{user:{id\u token:'1'}）之前一样

---

我想要的答案是： 我想确保再次调用makeStore（）时，它会更新先前导入的存储版本，该版本正在utils.ts中使用。有没有一种方法可以做到这一点，而不必使用useSelector（）并将用户值从组件传递到my utils函数

e、 g我可以这样做，但我不想这样做，因为我有很多这样的文件和函数，并且非常依赖从“state/store”导入存储。：

SomeComponent.tsx

const SomeComponent=（）=>{
const user=useSelector（（state:IState）=>state.user）
if（userIsDefined（user）==false）返回（）
...
}

utils.ts

//从“状态/存储”导入存储
const userIsDefined=（user）=>{
//const state=store.getState（）
如果（用户===未定义）返回false
...
返回真值
}

正如我上面所说的，我不想这样做

---

（顺便说一句，我似乎无法为此创建一个提琴，因为我不知道如何为测试和这个用例创建提琴）

---

感谢您向正确方向提供的任何帮助或推动。

这只是发现了应用程序中的一个错误：您使用的是对react组件中存储的

的直接访问，这是您永远不应该做的事情。当该状态更改并失去同步时，您的组件将不会重新加载

如果您确实需要这样的助手，请使用它制作一个自定义挂钩：

从“状态/存储”导入存储
const useUserIsDefined=（）=>{
const user=useSelector（state=>state.user）
如果（用户===未定义）返回false
...
返回真值
}

这样，您的助手就不需要直接访问
存储
，当存储值更改时，组件将正确地重新提交。
这只是发现了应用程序中的一个错误：您在react组件中使用的是对
存储
的直接访问，这是您永远不应该做的事情。当该状态更改并失去同步时，您的组件将不会重新加载

如果您确实需要这样的助手，请使用它制作一个自定义挂钩：

从“状态/存储”导入存储
const useUserIsDefined=（）=>{
const user=useSelector（state=>state.user）
如果（用户===未定义）返回false
...
返回真值
}

这样，您的助手就不需要直接访问
存储
，当存储值更改时，组件将正确地重新加载。
您如何调用这些util以及在何处调用这些util？一般来说：是的，这就是为什么您通常不应该将您的状态随机导入其他文件的原因。你可以开玩笑地模仿完整的存储文件，但那很痛苦。UTIL文件被很多其他文件使用，是的，我不想模仿完整的存储。也许有一种方法可以更新商店的状态，而不必再次调用makeStore。。。？我还没弄明白，他们是怎么用的？仅在组件中？其他地方？举几个例子。您可能需要在某个地方重新构造一些代码，因为现在您已经创建了带有“全局变量依赖项”的不稳定代码。但一般来说：您不应该调用从组件内部导入存储的方法。当状态更新时，组件不会更改。从本质上讲，您现在只是在发现应用程序中的一个bug。您究竟是如何以及在哪里调用这些util的？总的来说：是的，这就是为什么你们都喜欢这样