<RecoilURLSync> doesn't reset state if param is not present

[koichik]

RecoilURLSync{JSON,Transit} can take a param if the location's part is 'queryParams'.
However, if the new URL doesn't have the part, RecoilURLSync{JSON,Transit} doesn't reset a state that syncing it.

for example,

Atom:

const nameState = atom<string>({
  key: 'name',
  default: '',
  effects: [syncEffect({ refine: string() })],
})

App:

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <RecoilURLSyncJSON
        location={{ part: 'queryParams', param: 'state' }}
      >
        <Component {...pageProps} />
      </RecoilURLSyncJSON>
    </RecoilRoot>
  )
}

1. access to:
   http://localhost:3000/users/1

2. change name state to 'Foo', then URL is changed to:
   http://localhost:3000/users/1?state=%7B%22name%22%3A%22Foo%22%7D

3. navigate to:
   http://localhost:3000/users/2

expected: the name state is reset to the default (empty string).
actual: the name state still 'Foo'.

I think that this line should return empty Map() instead of null when stateStr is null

Recoil/packages/recoil-sync/RecoilSync_URL.js

Line 76 in 1a47a17

return stateStr != null ? wrapState(deserialize(stateStr)) : null;

[koichik]

The example on Next.js is here.
https://github.com/recruit-tech/recoil-sync-next

Install

git clone https://github.com/recruit-tech/recoil-sync-next
cd examples/url-sync-json/
yarn
yarn dev

location={{ part: 'queryParams' }} (no problem)

examples/url-sync-json/pages/_app.tsx:

  <RecoilURLSyncJSONNext
    storeKey="url-json-store"
    location={{ part: 'queryParams' }}
  >

open http://localhost:3000/

1. modify the form.

2. the URL will be updated.
   

3. click the "Top" link.
   

4. the URL will be updated.

5. the recoil states are also updated with the initial values as expected.
   

location={{ part: 'queryParams', param: 'params' }} (problematic)

edit examples/url-sync-json/pages/_app.tsx as follows:

      <RecoilURLSyncJSONNext
        storeKey="url-json-store"
        location={{ part: 'queryParams', param: 'params' }}
      >

open http://localhost:3000/

1. modify the form.

2. the URL will be updated.
   

3. click the "Top" link.
   

4. The URL will be updated.

5. however, the recoil states won't be updated. (unexpected)
   

@drarmstr What do you think?

[drarmstr]

@koichik - Sorry for the delay, still haven't gone through all of the backlog since I was out. Thank you for diving into this!
Please feel free to submit a PR with a unit test for this.