Unable to convert deep cloning to immer - reactjs

Question

I'm working on some legacy code that used to do full deep cloning of the redux state in a react application. Here's the original boilerplate, which is used as a basis for the reducers used in the application:
export default (initialState, handlers = {}, promiseActionTypes = []) =>
(state = initialState, action) => {
let nextState = _.cloneDeep(state)
promiseActionTypes.forEach((actionType) => {
if (action.type === `##REMOTE/${actionType}_REQUEST`) {
nextState.isFetching = true
}
if (action.type === `##REMOTE/${actionType}_SUCCESS`) {
nextState = {
...nextState,
data: _.get(action, 'data.storeData', action.data),
isFetching: false,
isInited: true,
}
}
if (action.type === `##REMOTE/${actionType}_FAILURE`) {
nextState.isFetching = false
}
})
if (handlers.hasOwnProperty(action.type)) {
nextState = handlers[action.type](nextState, action, _.cloneDeep(state))
}
return nextState
}
Those clone deeps are all big no-nos, so I'm trying to leverage immer's produce function to mutate drafted copies of the state before returning the new state.
Problem is, I've been unable to get everything in sync. Some pieces of state won't update correctly here or there. Here's my attempt at refactor so far:
import produce from 'immer'
export default (initialState, handlers = {}, promiseActionTypes = []) =>
(state = initialState, action) => {
return produce(state, (draft) => {
promiseActionTypes.forEach((actionType) => {
if (action.type === `##REMOTE/${actionType}_REQUEST`) {
draft.isFetching = true
}
if (action.type === `##REMOTE/${actionType}_SUCCESS`) {
draft.data = _.get(action, 'data.storeData', action.data)
draft.isFetching = false
draft.isInited = true
}
if (action.type === `##REMOTE/${actionType}_FAILURE`) {
draft.isFetching = false
}
return draft
})
if (handlers.hasOwnProperty(action.type)) {
return handlers[action.type](draft, action, state)
}
return draft
})
}
I tried to unfreeze the touched objects, but still no dice. Is my implementation just off? Or am I misunderstanding how produce works?
Hell, do I ever need something like immer if I'm just trying to get those two lodash cloneDeep calls out of there?
EDIT: Here's an example of a custom handler that would invoke the final line:
LOCATION_CHANGE: (state, action) => {
// bootstrap
if (_.isUndefined(state.location)) {
state.location = action.location
}
state.next = {
location: action.location,
changed: action.changed,
}
state.isNavigating = true
return state
},
VIEW_ROUTE_MATCH: (state, action) => {
state.next = {
...state.next,
match: action.match,
view: action.view,
}
return state
},

Answer 1

I'd say you don't need Immer, in this instance, as you're not really making deep or complex changes, but it can still help tidy up parts. Immer's going to force three lines of code, so I stick with the spread operator if that'll keep it to one line.
export default (initialState, handlers = {}, promiseActionTypes = []) =>
(state = initialState, action) => {
let nextState = state;
promiseActionTypes.forEach((actionType) => {
if (action.type === `##REMOTE/${actionType}_REQUEST`) {
nextState = { ...nextState, isFetching: true };
}
if (action.type === `##REMOTE/${actionType}_SUCCESS`) {
nextState = produce(state, draft => {
draft.data = _.get(action, 'data.storeData', action.data);
draft.isFetching = false;
draft.isInited = true;
});
}
if (action.type === `##REMOTE/${actionType}_FAILURE`) {
nextState = { ...nextState, isFetching: false };
}
})
if (handlers.hasOwnProperty(action.type)) {
nextState = handlers[action.type](nextState, action);
}
return nextState
}
const handlers = {
LOCATION_CHANGE: (state, action) => {
return produce(state, draft => {
if (_.isUndefined(state.location)) {
draft.location = action.location;
}
draft.next = {
location: action.location,
changed: action.changed,
}
draft.isNavigating = true
});
},
VIEW_ROUTE_MATCH: (state, action) => {
return produce(state, draft => {
draft.match = action.match;
draft.view = action.view;
});
},
}

Answer 2

The first issue is that your original code really shouldn't have been doing a "deep clone" at all, and especially not at the top of the reducer. That means it was doing extra work for every dispatched action, even if it wasn't relevant, and also likely causing the UI to re-render even if the data's values hadn't really changed. So, as you said, a "big no-no". Based on that, yes, I'd say Immer is useful here.
Second, you shouldn't be using promiseActionTypes.map() conceptually, since you're trying to do some updates instead of returning a new array. Use .forEach() as the original code did.
Third, you haven't described which fields aren't being update properly, so it's a bit hard
Beyond that, the draft code looks okay. However, the handlers line looks suspicious in this case. My guess is that those additional handlers are probably doing their own immutable work, rather than attempting to "modify" the draft state value. Oh, and you aren't even passing the draft to them anyway. So, if you're expecting those to be generating the rest of the changes, you need to A) pass draft in to the handlers, and B) change them to "modify" the draft.