Remove nested child from redux state following Firebase 'child_removed' listener triggered

Question

My redux state looks like this (its synced with Firebase).

{
  profile: {
    activeUsers: {
      Iiva2BGZffNTH84glOLXv8QHVTF2: {
        sex: male,
        age: 20,
      },
      PkfMxrN09RN7ygoBMWqm4jheEOx1: {
        sex: female,
        age: 20,
      },
      zQiGXvcUGmRSKUdr719621QleUw2: {
        sex: male,
        age: 25,
      }
    }
  }
}

I want to remove user zQiGXvcUGmRSKUdr719621QleUw2

Heres my action creator

  Firebase.database()
    .ref('profiles/activeUsers')
    .on(
      'child_removed',
      (snapshot) => {
        dispatch(_activeUserChildRemoved(snapshot));
      },
      (err) => {
        console.log(err.toString());
        Alert.alert(err);
      },
    );
};

const _activeUserChildRemoved = snapshot => ({
  type: ACTIVE_USER_CHILD_REMOVED,
  payload: snapshot,
});

and finally here is my reducer

  switch (action.type) {
    case ACTIVE_USER_CHILD_REMOVED:
      const key4Del = action.payload.key;
      return { //what goes here??? };
    default:
      return state;
  }
};

What do i return from reducer in order to remove the user referenced by snapshot.key from redux? Help is much appreciated

Answer 1

Got it!!

case ACTIVE_USER_CHILD_REMOVED:
      const key4Del = action.payload.key;
      const oldState = state;
      delete oldState.activeUsers[key4Del];
      return { ...oldState };

Answer 2

You need to remove the user by not mutating the state and simply by using destructuring.

Right now you're mutating the state directly by deleting object property from oldState

case ACTIVE_USER_CHILD_REMOVED:
  const key4Del = action.payload.key;
  const { [key4Del]: _, ...activeUsers} = state.activeUsers
  return {...state, activeUsers }

Spread Syntax will shallow compare the object, therefore you need to merge the filtered object again to generate a new state.