I have a React Native mobile app which uses Redux and redux-persist.
Suppose the state shape currently looks like this:
notifications: {
new_messages: 2,
new_friend_requests: 0,
new_jobs: 0
}
Suppose that we currently set those values with 1 reducer, where action.notifications is a dictionary with keys new_messages, new_friend_requests, and new_jobs.
const notifications = (state = {}, action) => {
switch (action.type) {
case SET_NOTIFICATIONS:
return action.notifications;
default:
return state;
}
}
I would like to
- get rid of new_jobs, since it is no longer relevant
- split the reducer
- rename
new_friend_requeststonew_friend_requests_count - rename
new_messagestonew_messages_count
The new state shape would look like this:
notifications: {
new_messages_count: 2,
new_friend_requests_count: 0
}
And we would have new reducers
const new_messages_count = (state = {}, action) => {
switch (action.type) {
case SET_NEW_MESSAGES:
return action.new_messages_count;
default:
return state;
}
}
const new_friend_requests_count = (state = {}, action) => {
switch (action.type) {
case SET_CONNECTION_REQUESTS:
return action.new_friend_requests_count;
default:
return state;
}
}
const notifications = combineReducers({
new_messages_count,
new_friend_requests_count
});
However, when I make that change, I run into an error message like this:
Unexpected keys "new_messages", "new_friend_requests", "new_jobs" found in previous state received by the reducer. Expected to find one of the known reducer keys instead: "new_messages_count", "new_friend_requests_count". Unexpected keys will be ignored.
I understand why this happens: the user's previously persisted redux state contains those keys, and that gets rehydrated into my new Redux state shape. My question is, what is a graceful way to handle this situation?
EDIT: I realized that the error message may be entirely due to renaming the variables, and that the reducer split/decomposition may not be relevant. Still, how would you gracefully rename those variables without running into that error?