Question

我尝试使用react-native进行身份验证注销并遇到一个问题，我想重置redux存储的状态但是，因为我正在使用react-navigation，我有一堆仍然挂载的redux连接屏幕，当状态树重置为初始状态时会重新呈现，导致一堆异常错误。我尝试在注销时使用react-navigation重置来卸载它们，这会将用户重定向到注册/登录屏幕，但我无法知道这些屏幕何时实际卸载才能调用RESET_STATE操作。最初我通过传奇发送行动。

传奇/ logout.js

＆＃13;

import { LOGOUT, RESET_STATE } from 'Actions/user';

// clear localstorage once user logs out.
const clearData = function* clearData(action) {
  AsyncStorage.removeItem('user');
  
  yield put(
    NavigationActions.reset({
      index: 0, 
      actions: [ 
        NavigationActions.navigate({ routeName: 'SignedOut' })
      ],
    })
  );
  // causes re-renders, screens still mounted
  yield put({type: RESET_STATE});
}

export default function* logoutSaga () {
  yield all([
    yield takeEvery(LOGOUT, clearData),
  ]);
}

＆＃13;

我也尝试在用户到达它的componentDidMount周期中的SignedOut屏幕后重置，但不幸的是，在触发componentDidMount之后，屏幕在某个时刻卸载了：

屏幕/ SignedOut.js

＆＃13;

import { resetState } from 'Actions/user';
import ActionButton from 'Components/FormElements/ActionButton';

class SignedOut extends Component {
  // screens are still mounted, causing screens from
  // previous screens to throw exception errors
  componentDidMount() {
    this.props.dispatch(resetState());
  }

  componentWillUnmount() {
    // never called
  }

  handleSignup = () => {
    this.props.navigation.navigate('Signup');
  }

  handleLogin = () => {
    this.props.navigation.navigate('Login');
  }

  render() {
    return(
      <Container>
        <ActionButton
          text="Sign Up"
          handleButtonPress={this.handleSignup}
        />
        <ActionButton
          text="Log In"
          handleButtonPress={this.handleLogin}
        />
      </Container>
    );
  }
}

export default connect()(SignedOut);

＆＃13;

我的问题是，在我的所有屏幕最终都被反应导航重置操作卸载后，有没有人能想到重置redux存储状态的方法？

Answer 1

问题是您使用导航导航到登录/注册屏幕，导致您的所有其他组件都已挂载，您应该使用返回或重置来卸载所有组件并显示登录屏幕。

Answer 2

由于我不知道你的状态如何，这一直是问题，为什么不尝试在所有这些组件上使用componentWillUnmount，设置状态变量并检查当你想重置导航？

Answer 3

在考虑了这个问题很长一段时间之后，我发现可能我应该专注于抛出的错误，而不是为什么我会收到错误。（虽然我确实学到了很多东西。）

虽然在调用重置后找出所有屏幕完全卸载时如何监听，但这本来是非常有帮助的，它只是绕过实际问题的捷径，我的redux状态的某些分支的initialState是错误。无论何时反应导航决定卸载旧屏幕，都不再纠正错误。

当react-navigation reset没有立即从堆栈中卸载屏幕时，如何在使用react-navigation时重置redux存储的状态？

3 个答案: