使用 React 导航 goBack() 函数管理 Redux 状态

Question

我正在学习 React Native 和 Redux 并且我已经开始使用第 3 方库 - 特别是 React Navigation.

我有两个屏幕，Main Screen 和 Alarm Setup Screen。 Main Screen 有一个警报列表，Alarm Setup Screen 有警报的详细信息并提供编辑其详细信息（小时、重复、启用等）的可能性。我在 Main Screen 上有一个创建新警报的按钮。当用户按下按钮时，用户将被重定向到 Alarm Setup Screen 并有可能创建一个新的警报。新警报已经默认填充了所有参数，并添加到 redux 状态。 Alarm Setup Screen 上还有两个按钮（Save 和 Cancel）。如果用户按下 Cancel 按钮，我将删除新创建的警报，并使用 React Navigation.

中的 goBack() 函数

问题出在用户在 Main Screen 上按下创建新闹钟按钮后按下 Cancel 按钮时。如果我从 Redux 状态删除新创建的警报，我会收到错误消息，因为屏幕尝试渲染并且警报不再存在。发生这种情况是因为在 goBack() 函数被触发之前状态发生了变化。

cancelAlarmEditButton() {
  const alarmToDelete = this.props.alarmSetup.deleteNewAlarm;
  const {goBack} = this.props.navigation;
  goBack();
  this.props.dispatchDeleteCurrentAlarmState(alarmToDelete.id);

}

因为我找不到解决这个问题的方法，所以我尝试更新 Main Screen 上的 Redux 状态。这没有任何错误，但是当我删除警报时警报列表没有更新。

checkAlarmToDelete() {
  const alarmToDelete = this.props.alarmSetup.deleteNewAlarm;
  if (alarmToDelete && alarmToDelete.delete) {
    this.props.dispatchDeleteCurrentAlarmState(alarmToDelete.id);
  }
}

componentDidUpdate() {
  this.checkAlarmToDelete();
}

如果我更新 Alarm Setup Screen 中的 Redux 状态，我会收到错误消息。如果我在Main Screen更新状态不正确。

//Reducer code:
case DELETE_ALARM: {
      const {id} = action.payload;
      const alarmsData = state.alarmsData.filter(val => val !== id)
      const mergedState = state.merge({
        deleteNewAlarm: undefined,
        alarmsData: {
          [id]: undefined,
        },
      }, { deep: true })

      return saveState(mergedState)

      return state;

基本上，我想知道使用 goBack() 函数管理 Redux 状态和 React Navigation 的最佳方法。

有人能解决我的问题吗？

Answer 1

我刚刚设法解决了我的问题。在更新 redux 状态之前，我只是将渲染函数更改为 return 一个空视图。

cancelAlarmEditButton() {
  const {goBack} = this.props.navigation;
  const {alarmId, newAlarm} = this.props.navigation.state.params;
  if (newAlarm) {
    this.render = () => {
      return (<View/>)
    }
    this.props.dispatchDeleteCurrentAlarmState(alarmId);
  }
  goBack();
}

这样即使报警对象不存在也没有问题

使用 React 导航 goBack() 函数管理 Redux 状态

Manage Redux state with React navigation goBack() function

react-native

react-redux

react-navigation