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

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

import { createRoot } from 'react-dom/client';

import App from './App';
import './styles/css/index.css';
import { Provider } from 'react-redux';
import { store } from './util/redux/store';

const container = document.getElementById('root');
const root = createRoot(container!);

root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);

module.hot?.accept();

gridRowSlice.tsx

import { PayloadAction, createSlice } from '@reduxjs/toolkit';
import { RootState } from './store';

export interface GridState {
  activeRow: any;
}

const initialState: GridState = {
  activeRow: {},
};

export const dataSlice = createSlice({
  name: 'gridRow',
  initialState,
  reducers: {
    move: (state, action) => {
      state.activeRow = action.payload;
    },
  },
});

export const { move } = dataSlice.actions;

export const movedData = (state: RootState) => state.stocksList.activeRow;
export default dataSlice.reducer;

hooks.tsx

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

store.tsx

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import gridRowReducer from './gridRowSlice';

export const store = configureStore({
  reducer: {
    stocksList: gridRowReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;

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

import { move } from '../../util/redux/gridRowSlice';
import { useAppDispatch } from '../../util/redux/hooks';

const table = () => {

useEffect(() => { 
dispatch(move(tableData)); 
});

  return (
      <div>
        //code for table
      </div>
  );
};
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.

import { store } from '../util/redux/store';
import { useAppSelector } from '../util/redux/hooks';


const receiveData = () => {
const data = useAppSelector(movedData);
const view = store.getState();
const view2 = useAppSelector((state) => state.stocksList.activeRow);

useEffect(() => { 
console.log(store.getState(), 'data1'); //returning blank object
console.log(data, 'data2'); //returning blank object
console.log(view, 'data3'); //returning blank object
console.log(view2, 'data4');  //returning blank object
    });
  return (
      <div>
        //code
      </div>
  );
};
export default receiveData;

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

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