Unclear what key: 'root' means

[vladnicula]

Have been using v4 without issues. Now it's not clear what key means, and how it playes with whitelist. I'm either missing something essential - in which case I'm sorry for bringing this up - or the docs are fuzzy at the moment:

const config = {
  key: 'root',
  storage,
  whitelist: ['user'],
}

and

const config = {
  key: 'root',
  storage,
}

Persist the same thing. The entire store.

Docs say this about key: key: string, // the key for the persist. Persist what? what is the relationship with whitelist. What does root mean? I don't have a 'root' key in my reducer.

Thanks

[ScreamZ]

Hello,

it is not clear, I've already reported that.

This is the key used for the key/value storage in AsyncStorage.

By default if you let root you storage key will be persist:rootyou can change it to avoid conflicts for any case.

[thinkocapo]

I'm still not clear on the difference, but a dev on my team couldn't get our app to run even though it ran fine on my machine (i.e. same exact git branch and code), so we changed primary to root here and now it works:

const config = {
  key: 'root',
  storage,
};

at one point I read that 'root' was for 'v4', it was a comment I had left in there. I removed it.

However, on my machine, my app only runs if I put primary

const config = {
  key: 'primary',
  storage,
};

Can anyone explain that?

The reason why I tried changing primary to root for my co-worker: pure guess :)

The error we we get if we use the incorrect value is like can't read property payload of undefined meaning on action.payload and its caused by:

        case 'persist/REHYDRATE':
            return Object.assign({}, state, {...action.payload.newClaim})

[ScreamZ]

That's strange, I think it's because you've a corrupted storage, try to desinstall et reinstall the application (remove it, do not update)

[thinkocapo]

Hmm I don't completely follow you. You mean to delete npm_modules and re-install them? Or delete the entire project directory and do git clone... again?

We looked at Chrome tools > Application tab > Local Storage > localhost:3000 > and he deleted all the key/value pairs in there (one of which was primary:root) and now he can't get the app to run again.

He's trying both root and primary as the value, we're having no luck. Something we're not understanding here about how it works. Hmmm.

Update this works:

if(!action.payload){
     return Object.assign({}, state, {initialState})
}
return Object.assign({}, state, {...action.payload.newClaim})

[ScreamZ]

My bad, I'm used to think in the React Native way…

Happy to hear that's working again

[SudoPlz]

For future readers, what I've come to realise is that the key is basically a "key" under which you store your data.

Imagine you store data under root. If you then change the key to let's say foo later on, whenever you rehydrate, you're now querying the foo name space so to say. The first time you rehydrate, foo will contain nothing, but during the next run of the app, foo will contain the persisted state. Another thing I've come to realise is that if you change the key, the old data is still there, and it's not getting purged automatically

To continue with my example, I wonder if there's a way to clear root data without clearing the foo data!

[ghost]

If you want to change the name of the root key from 'root', Simply change it in store in the config object