如何在另一个浏览器标签中打开组件时从Redux中获取状态的值？

huangapple
go评论99阅读模式
英文:

How to get the value of state from redux when the component is opened in anothe browser tab?

问题

目前我正在尝试在我的应用程序中实现Redux Toolkit，并在那里创建了存储并将值设置为状态。

但问题是，当我在新标签中打开组件时，我无法访问存储在Redux状态中的值。请建议如何解决这个问题。

以下是供参考的代码：

intex.tsx

  1. import { createRoot } from 'react-dom/client';
  3. import App from './App';
  4. import './styles/css/index.css';
  5. import { Provider } from 'react-redux';
  6. import { store } from './util/redux/store';
  8. const container = document.getElementById('root');
  9. const root = createRoot(container!);
  11. root.render(
  12.   <Provider store={store}>
  13.     <App />
  14.   </Provider>,
  15. );
  17. module.hot?.accept();

gridRowSlice.tsx

  1. import { PayloadAction, createSlice } from '@reduxjs/toolkit';
  2. import { RootState } from './store';
  4. export interface GridState {
  5.   activeRow: any;
  6. }
  8. const initialState: GridState = {
  9.   activeRow: {},
  10. };
  12. export const dataSlice = createSlice({
  13.   name: 'gridRow',
  14.   initialState,
  15.   reducers: {
  16.     move: (state, action) => {
  17.       state.activeRow = action.payload;
  18.     },
  19.   },
  20. });
  22. export const { move } = dataSlice.actions;
  24. export const movedData = (state: RootState) => state.stocksList.activeRow;
  25. export default dataSlice.reducer;

hooks.tsx

  1. import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
  2. import type { RootState, AppDispatch } from './store';
  4. export const useAppDispatch = () => useDispatch<AppDispatch>();
  5. export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

store.tsx

  1. import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
  2. import gridRowReducer from './gridRowSlice';
  4. export const store = configureStore({
  5.   reducer: {
  6.     stocksList: gridRowReducer,
  7.   },
  8. });
  10. export type AppDispatch = typeof store.dispatch;
  11. export type RootState = ReturnType<typeof store.getState>;
  12. export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;

在这个组件中，我使用dispatch从表格发送一些数据。

  1. import { move } from '../../util/redux/gridRowSlice';
  2. import { useAppDispatch } from '../../util/redux/hooks';
  4. const table = () => {
  5.   useEffect(() => {
  6.     dispatch(move(tableData));
  7.   });
  9.   return (
  10.     <div>
  11.       //表格代码
  12.     </div>
  13.   );
  14. };
  15. export default table;

在其他组件中，我想访问更新状态的值，尝试了不同的方法，但都不适用于我。这是我尝试的方法。

  1. import { store } from '../util/redux/store';
  2. import { useAppSelector } from '../util/redux/hooks';
  4. const receiveData = () => {
  5.   const data = useAppSelector(movedData);
  6.   const view = store.getState();
  7.   const view2 = useAppSelector((state) => state.stocksList.activeRow);
  9.   useEffect(() => {
  10.     console.log(store.getState(), 'data1'); // 返回空对象
  11.     console.log(data, 'data2'); // 返回空对象
  12.     console.log(view, 'data3'); // 返回空对象
  13.     console.log(view2, 'data4'); // 返回空对象
  14.   });
  16.   return (
  17.     <div>
  18.       //代码
  19.     </div>
  20.   );
  21. };
  22. export default receiveData;

注意：我希望在应用程序正在运行时，无论在哪个标签中打开，都能获取状态的值。

英文:

Currently I'm trying to implement the redux toolkit in my application and there i have created the store and set the value to the state.

But the issue is I'm unable to access the value stored in the redux state wen I open the component in new tab. So how it can be done please suggest.

Here is the code for the reference:-

intex.tsx

  1. import { createRoot } from &#39;react-dom/client&#39;;
  3. import App from &#39;./App&#39;;
  4. import &#39;./styles/css/index.css&#39;;
  5. import { Provider } from &#39;react-redux&#39;;
  6. import { store } from &#39;./util/redux/store&#39;;
  8. const container = document.getElementById(&#39;root&#39;);
  9. const root = createRoot(container!);
  11. root.render(
  12.   &lt;Provider store={store}&gt;
  13.     &lt;App /&gt;
  14.   &lt;/Provider&gt;,
  15. );
  17. module.hot?.accept();

gridRowSlice.tsx

  1. import { PayloadAction, createSlice } from &#39;@reduxjs/toolkit&#39;;
  2. import { RootState } from &#39;./store&#39;;
  4. export interface GridState {
  5.   activeRow: any;
  6. }
  8. const initialState: GridState = {
  9.   activeRow: {},
  10. };
  12. export const dataSlice = createSlice({
  13.   name: &#39;gridRow&#39;,
  14.   initialState,
  15.   reducers: {
  16.     move: (state, action) =&gt; {
  17.       state.activeRow = action.payload;
  18.     },
  19.   },
  20. });
  22. export const { move } = dataSlice.actions;
  24. export const movedData = (state: RootState) =&gt; state.stocksList.activeRow;
  25. export default dataSlice.reducer;

hooks.tsx

  1. import { TypedUseSelectorHook, useDispatch, useSelector } from &#39;react-redux&#39;;
  2. import type { RootState, AppDispatch } from &#39;./store&#39;;
  4. export const useAppDispatch = () =&gt; useDispatch&lt;AppDispatch&gt;();
  5. export const useAppSelector: TypedUseSelectorHook&lt;RootState&gt; = useSelector;

store.tsx

  1. import { configureStore, ThunkAction, Action } from &#39;@reduxjs/toolkit&#39;;
  2. import gridRowReducer from &#39;./gridRowSlice&#39;;
  4. export const store = configureStore({
  5.   reducer: {
  6.     stocksList: gridRowReducer,
  7.   },
  8. });
  10. export type AppDispatch = typeof store.dispatch;
  11. export type RootState = ReturnType&lt;typeof store.getState&gt;;
  12. export type AppThunk&lt;ReturnType = void&gt; = ThunkAction&lt;ReturnType, RootState, unknown, Action&lt;string&gt;&gt;;

In this component I have used dispatch to send some data from the table.

  1. import { move } from &#39;../../util/redux/gridRowSlice&#39;;
  2. import { useAppDispatch } from &#39;../../util/redux/hooks&#39;;
  4. const table = () =&gt; {
  6. useEffect(() =&gt; { 
  7. dispatch(move(tableData)); 
  8. });
  10.   return (
  11.       &lt;div&gt;
  12.         //code for table
  13.       &lt;/div&gt;
  14.   );
  15. };
  16. export default table;

And in other component I want to access the value of updated state and I tried different approach but non is working for me.
This is what I have tried.

  1. import { store } from &#39;../util/redux/store&#39;;
  2. import { useAppSelector } from &#39;../util/redux/hooks&#39;;
  5. const receiveData = () =&gt; {
  6. const data = useAppSelector(movedData);
  7. const view = store.getState();
  8. const view2 = useAppSelector((state) =&gt; state.stocksList.activeRow);
  10. useEffect(() =&gt; { 
  11. console.log(store.getState(), &#39;data1&#39;); //returning blank object
  12. console.log(data, &#39;data2&#39;); //returning blank object
  13. console.log(view, &#39;data3&#39;); //returning blank object
  14. console.log(view2, &#39;data4&#39;);  //returning blank object
  15.     });
  16.   return (
  17.       &lt;div&gt;
  18.         //code
  19.       &lt;/div&gt;
  20.   );
  21. };
  22. export default receiveData;

Note:- I want to get the value of state in another tab also when its opened while the application is running.

答案1

得分: 1

Redux Store 中存储的数据通常是一个全局 JavaScript 对象。

除非我们将变量持久化存储在某个地方，否则无法从一个标签中访问在另一个标签中声明的变量。例如，将其存储在 LocalStorage 中并通过 storage event 进行同步。

一个简单的解决方案是使用 redux-state-sync 来在多个标签之间同步数据。

如果您的应用程序需要在重新加载后保留数据，您可以使用 redux-persist 进行持久化存储。

参考链接：https://github.com/aohua/redux-state-sync

英文:

The data stored in the Redux Store is typically a Global JS Object.

You cannot access a variable that is declared in a tab from another, until we persist it somewhere. Eg. Storing it in LocalStorage and syncing it via storage event

Simple solution should be using redux-state-sync to sync the data across multiple tabs.

If your application requires the data to be there even after reloading, you can persist it using redux-persist

Reference: https://github.com/aohua/redux-state-sync

huangapple
  • 本文由 发表于 2023年4月4日 17:33:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/75927770.html
  • react-redux
  • reactjs
  • redux
  • redux-toolkit
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定