Reconnect to the port if not ready upon safety message

[tuttleb]

Overview

In situations where wrapStore is happening after the Store is created we do not currently call the onConnect listener which syncs initial state. The safety handler, however, will mark the store as ready and resolve the ready promise. This means that the content script will start using the store even though it has never synced with the background. In my use case this means that the content script is using the default Store state of {}.

To resolve this, the safety handler (if the store is not ready) now triggers the Store to disconnect and then reconnect to the port. This will trigger the onConnect handler in the wrapped store and sync state as expected.

Alternatives

• I explored having the safety handler actually sync the state, but that potentially leaves the app in a state where the content script has initial state, but the background script has not necessarily set up a subscription to post messages to that port. Rather than implement a secondary handshake process, I thought reconnecting if the safety handler is used would be a simpler approach.

Reproduction Steps

These are effectively the same as #106

I'm wrapping my wrapStore in a timeout, then reloading the extension + a page that sets up a Store in a content script. Basically this guarantees that the Store is set up before wrapStore happens.

setTimeout(() => {
  wrapStore(store, {
    portName: REDUX_PORT_NAME,
  });
}, 10000);