Unable to initialize state for new tab from current state on original tab

[webbpinner]

I'll start off by saying redux-state-sync does a great job keeping the state sync across browser tabs. However I'm noticing that when I create a new tab I have to alter the state on the original tab for the state on the new tab(s) to properly match the original tab's state.

i.e. The state on the new tab does not actually match the original tab's state until the original tab's state is altered. After that initial alteration to the original tab's state, all the states match and stay sync'ed.

Does this plugin include a method for performing an initial copy of the original tab's state to the state of the new tab? I took a look through the code but didn't see any methods that might help.

Cheers -W

[aohua]

Hey -W,

I'm afraid that redux-state-sync does not have a method to solve what you have addressed. However, you can use localStorage to persist your state and initial the new tab with the same state.

Thank you for the feedback, I think redux-state-sync should definitely support this feature. It'd be good if you want to work on this feature. ;-) I will think about it as well.

Cheers, Aohua

[aohua]

@webbpinner Hi -W, I have added this feature to the redux-state-sync. But this feature is totally experimental, I think to sync a large state may cause the web page hang because localStorage don't have asynchronous APIs.

[shivamragnar]

The method mentioned in the merged branch no more exists and the issue is still persisting. Hope @AOHUA you look into this.

[aohua]

The method mentioned in the merged branch no more exists and the issue is still persisting. Hope @AOHUA you look into this.

Have you added either initMessageListener(store) or initStateWithPrevTab(store)? Does the example work on your side?

[shivamragnar]

@AOHUA I have added initStateWIthPrevTab(store). Also wrapped the root reducer as mentioned in the docs. But the library is able to sync only already opened tabs not the new tabs.

[aohua]

@shivamragnar The example works as expected. Could you share some of your code? What are the libraries been used?

[shivamragnar]

store.js

import { createStore, applyMiddleware } from "redux";
import {
	createStateSyncMiddleware,
	initStateWithPrevTab
} from "redux-state-sync";

import reducer from "./reducers";

const config = {
	initiateWithState: true
};
const middlewares = [createStateSyncMiddleware(config)];
const store = createStore(reducer, applyMiddleware(...middlewares));

initStateWithPrevTab(store);

export default store;

reducer.js

import { withReduxStateSync } from "redux-state-sync";

import {
	SET_VIDEO_LINKS_LIST,
	SET_CURRENT_PLAYING_VIDEO,
	SET_CURRENT_PLAYER
} from "../actions";

const initialState = {
	links: [],
	currentPlayingVideo: "",
	currentPlayer: null
};

const rootReducer = (state = initialState, action) => {
	switch (action.type) {
		case SET_VIDEO_LINKS_LIST:
			return { ...state, links: action.payload };
		case SET_CURRENT_PLAYING_VIDEO:
			return { ...state, currentPlayingVideo: action.payload };
		case SET_CURRENT_PLAYER:
			return { ...state, currentPlayer: action.payload };
		default:
			return state;
	}
};

export default withReduxStateSync(rootReducer);

package.json

{
	"name": "Youtube-Links-Player",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"immutability-helper": "^3.0.1",
		"react": "^16.13.0",
		"react-dnd": "^10.0.2",
		"react-dnd-html5-backend": "^10.0.2",
		"react-dom": "^16.13.0",
		"react-redux": "^7.2.0",
		"react-scripts": "3.4.0",
		"react-toastify": "^5.5.0",
		"react-youtube": "^7.9.0",
		"redux": "^4.0.5",
		"redux-state-sync": "^3.1.1",
		"redux-thunk": "^2.3.0"
	},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
	},
	"eslintConfig": {
		"extends": "react-app"
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	}
}

@AOHUA Here are the libraries used and the code.

[aohua]

Looks fine, can you push your code, so that I can debug on your branch? @shivamragnar

[shivamragnar]

Yeah sure...you can check out my repo https://github.com/shivamragnar/youtube-links-player @AOHUA

[aohua]

@shivamragnar It's working on my side. I didn't change anything. You may try deleting your node-modules and reinstall packages

[shivamragnar]

@AOHUA I did that already.

• You opened localhost:3000
• Added a Youtube video link and link gets added in the playlist
• You opened another tab with localhost:3000
• Ideally you should be able to see the already added link, with video being played Is it what you have done and tested?

[aohua]

@shivamragnar Yes, it works exactly as what you described, you may wanna try delete your lock file, I was using yarn to install the packages.

[shivamragnar]

@AOHUA I restarted my server, reinstalled packages, even checked in incognito, deleted lock file as well...but not able to get my application behave as it is behaving on your machine. Sounds funny.

[aohua]

@shivamragnar What is the browser that you are using? Could you try if the example works on your machine?

[shivamragnar]

@AOHUA i am using Google Chrome currently. The example is working fine on my machine as well.

[aohua]

@shivamragnar

[shivamragnar]

Thanks @AOHUA I will check why the same behaviour i am not able to produce. Thanks for the quick response.

[saurabhtaneja]

I am facing the same issue, @aohua can you please help?

[princerai162]

me as well! can someone help? @aohua

[aohua]

@saurabhtaneja @princerai162 Any error or any code that I can use to debug?

[VRedondo]

I have a similar issue using initStateWithPrevTab, if I have a tab "origin", then open a second view from the "origin" tab, then modify the state in redux in the second tab and open the third tab from the "second" tab, the changes in redux do not get sync-up with the modifications done at the second tab. If I remove the origin tab and the third tab and try to reopen a tab from the "second" tab again, that last tab gets all the latest changes done at the redux state.

unfortunately, I don't have a code I can provide to debug, but I'll work on that, thanks so much for this lib is being of a lot of help in our app.

@aohua