react-native - 触发 Firebase 'child_removed' 侦听器后，从 redux 状态中删除嵌套子级

Question

我的 redux 状态看起来像这样（它与 Firebase 同步）。

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

我想删除用户 zQiGXvcUGmRSKUdr719621QleUw2

这是我的动作创造者

  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,
});

最后这是我的减速器

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

为了从redux中删除snapshot.key引用的用户，我从reducer返回什么？非常感谢帮助

Answer 1

知道了！！

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

Answer 2

您需要通过不改变状态并简单地使用destructuring来删除用户。

现在你正在state通过删除 object 属性来直接改变oldState

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

Spread Syntax 将对对象进行浅层比较，因此您需要再次合并过滤后的对象以生成新状态。