在多个选项卡中的影子dom中的Redux传奇，只运行一次

Question

1. 我在react中有一个平台应用程序
2. 我有一个小型react应用程序，它支持浏览器中的多个客户选项卡
3. 平台应用程序将小型react应用程序嵌入为shadow-dom
4. 小的App.js是这样的

function App() {
// create redux store here

// sagaMiddleware.run(rootSaga);

useEffect(() => {
dispatch(ACTION) -> 
saga catch it -> call api -> feed back to reducer -> 
feed back to ui
});
return <div>bla</div>;
}

网上有很多例子。他们将store+sagaMiddleware.run放在App.js之外。这意味着只创建1个store和1个saga中间件。当App.js嵌入到平台中时。假设你打开了多个选项卡，你会有多个App.js实例，但你的商店只有1个，所以每个选项卡都与其他选项卡同步，这是我们不想要的

你可以看到我在App.js中运行了store+中间件。这在嵌入时是必要的。

// In this example, we put store and middle ware out side of app, but sitting like a global variable in a file App.js. 
// If you put a console.log  right next to sagaMiddleware.run(rootSaga). No matter how many tabs you open, console.log only print once.
// create redux store here

// sagaMiddleware.run(rootSaga);
function App() {
useEffect(() => {
dispatch(ACTION) -> 
saga catch it -> call api -> feed back to reducer -> 
feed back to ui
});
return <div>bla</div>;
}

当前的问题是，当在平台应用程序的选项卡中打开第一个客户时。一切都很好。(能够通过api获取数据并显示结果(。当我关闭第一个选项卡并再次打开同一客户时。

当打开同一个选项卡时，我发现useEffect正在启动，但sagaMiddleware.run似乎根本没有运行，所以它无法捕捉任何操作。

另一种情况是我打开客户A，然后打开客户B。sagaMiddleware.run似乎根本没有运行。takeEvery等没有运行。

有人有什么线索吗？

Answer 1

我想你的问题是关于didMount((和didUpdate((逻辑。。。您需要将更改告知应用程序。你可以这样做：

const mounted = useRef();
useEffect(() => {
if (!mounted.current) {
// do componentDidMount logic
mounted.current = true;
} else {
// do componentDidUpdate logic
// create redux store here
// sagaMiddleware.run(rootSaga);
}
});

我希望它能帮助你！