State didn't change in Redux - reactjs

Question

I have this reducer that has in initial state and array of plans that has array of visits that has an array of treatments.
The idea is when action (Remove_treatment) is triggered, it removes one of the treatment as following:
import { REMOVE_TREATMENT } from "./treatmentPlanTypes";
const initialState = {
plans: [
{
id: 1,
visits: [
{
id: 1,
treatments: [
{
id: 1,
name: "treatment1",
},
{
id: 2,
name: "treatment2",
},
],
},
{
id: 2,
treatments: [
{
id: 1,
name: "treatment1",
},
{
id: 2,
name: "treatment2",
},
],
},
],
},
],
};
const treatmentPlanReducer = (state = initialState, action) => {
switch (action.type) {
case REMOVE_TREATMENT:
let clonePlans = [...state.plans];
const visitIndex = clonePlans[0].visits.findIndex(
(i) => i.visitId === action.visitId
);
const treatmentIndex = clonePlans[0].visits[
visitIndex
].treatments.findIndex((i) => i.treatmentId === action.treatmentId);
clonePlans[0].visits[visitIndex].treatments.splice(treatmentIndex, 1);
console.log(JSON.stringify(clonePlans));
return {
...state,
plans: [...clonePlans],
};
default:
return state;
}
};
When I console.log(clonePlans) I get the correct array.
But when I return the value like:
return {
...state,
plans: [...clonePlans],
};
I'm still having the old plan and not updated in the component.
If I tried to enter the expected plan as I get from console.log directly in the above return statement, the component is updated successfully.
this is a part of the component in my code:
const plans = useSelector((state) => state.treatmentPlan.plans, shallowEqual)
const listOfPlans = plans.map((plan) => (
<PlanArea key={plan.planId} visits={plan.visits} />
));
console.log(listOfPlans);
The component is still showing the old plan, but console.log(listOfPlans) shows the correct array.

Answer 1

You need to deeply copy your plans array for your component to feel the change in state, and hence re-render
let clonePlans = JSON.parse(JSON.stringify(state.plans))
return { ...state, plans: clonePlans };