Redux показывает старое состояние при открытии экрана

Question

У меня есть экран входа в систему с 2 полями: адрес электронной почты и пароль, он работает нормально, но если пользователь вводит данные в любое из полей, затем нажимает кнопку «Назад», чтобы перейти к предыдущему экрану, а затем возвращается к экрану входа в систему, экран должен может быть сброшен и пуст, но содержит предыдущий пользовательский ввод.

Как очистить / сбросить пользовательский ввод, т. Е. (Состояние / реквизиты), когда пользователь нажимает кнопку возврата и экран закрывается. Я пользуюсь редуксом, Реактивная навигация 3

Вот мой код для экрана входа в систему.

LoginScreen

class LoginScreen extends Component {
    constructor(props) {
    super(props);
    this.unsubscriber = null;
}

componentWillUnmount(): void {
    if (this.unsubscriber) {
    this.unsubscriber();
    }
}

onEmailChange(text) {
    this.props.emailChanged(text);
}

onPasswordChange(text) {
    this.props.passwordChanged(text);
}

onConfirmPasswordChange(text) {
    this.props.confirmPasswordChanged(text);
}

onLoginButtonPress() {
    let {email, password} = this.props;
    let currentAnonymousFirebaseUser = firebase.auth().currentUser;
    this.props.loginUser({email, password, currentAnonymousFirebaseUser});
}

renderError() {
    if (this.props.error) {
      return (
        <View
          style={{backgroundColor: "#fff", paddingBottom: 5, paddingTop: 5}}>
          <Text style={styles.errorTextStyle}>{this.props.error}</Text>
        </View>
      );
    }
}

renderLoginButton() {
    if (this.props.loading) {
        return <Spinner size="large" />;
    }
    return <Button onPress={() => this.onLoginButtonPress()}>Login</Button>;
}

render() {
    return (
      <Card>
        <CardSection>
          <Row>
            <Input
              label="Email"
              placeholder="email@gmail.com"
              onChangeText={this.onEmailChange.bind(this)}
              value={this.props.email}
            />
          </Row>
        </CardSection>

        <CardSection>
          <Row>
            <Input
              secureTextEntry
              label="Password"
              placeHolder="password"
              onChangeText={this.onPasswordChange.bind(this)}
              value={this.props.password}
            />
          </Row>
        </CardSection>

        {this.renderError()}

        <CardSection>
          <Row>{this.renderLoginButton()}</Row>
        </CardSection>
      </Card>
      );
   }
}

const mapStateToProps = ({auth}) => {
    const {email, password, confirmPassword, error, loading} = auth;
    return {email, password, confirmPassword, error, loading};
};

export default connect(mapStateToProps, {
    emailChanged,
    passwordChanged,
    confirmPasswordChanged,
    loginUser
})(LoginScreen);

Редуктор

const INITIAL_STATE = {
    email: "",
    password: "",
    confirmPassword: "",
    user: null,
    error: "",
    loading: false
};

export default (state = INITIAL_STATE, action) => {
    console.log(action);

    switch (action.type) {
        case EMAIL_CHANGED:
          return {...state, email: action.payload};

        case PASSWORD_CHANGED:
          return {...state, password: action.payload};

        case CONFIRM_PASSWORD_CHANGED:
          return {...state, confirmPassword: action.payload};

        case CREATE_USER_ACCOUNT:
          return {...state, loading: true, error: ""};

        case CREATE_USER_ACCOUNT_SUCCESS:
          return {...state, ...INITIAL_STATE, user: action.payload};

        case CREATE_USER_ACCOUNT_FAIL:
          return {...state, error: action.payload, loading: false};

       case LOGIN_USER:
          return {...state, loading: true, error: ""};

        case LOGIN_USER_ANONYMOUSLY:
          return {...state};

        case LOGIN_USER_SUCCESS:
          return {...state, ...INITIAL_STATE, user: action.payload};

        case LOGIN_USER_FAIL:
          return {...state, error: action.payload, loading: false};

        default:
          return state;
    }
};

Любая помощь будет принята с благодарностью!

Answer 1

Вы можете сделать еще одно действие для очистки ваших данных в редуксе, например,

const clearData = () => {
  return{
  type: "CLEAR"
 };
};

, а в вашем редукторе вы можете просто использовать этот clearData, например,

 case "CLEAR"
 return {...state, ...INITIAL_STATE}

или

 case "CLEAR"
 return {...state, email: INITIAL_STATE.email}

Это зависит от вашего варианта использования.Когда все будет сделано.

Просто вызовите эти действия на componentWillUnmount на экране входа в систему

, например

componentWillUnmount() {
 this.props.clearData();
}

Answer 2

Решение 1

Добавьте параметр reset к вашему LoginScreen при переходе к нему:

class LoginScreen extends React.Component {
  componentWillReceiveProps(nextProps) {
    const nextReset = nextProps.navigation.getParam("reset");
    const reset = this.props.navigation.getParam("reset");

    if (nextReset && nextReset !== reset) {
      // Create  a redux action to clear field values:
      nextProps.resetFieldsAction();
    }
  }
}

Вот как вы переходите на свой LoginScreen:

this.props.navigation.navigate("LoginScreen", { reset: true });

Решение 2

import {NavigationEvents} from 'react-navigation';

Добавьте этот компонент к вашему методу рендеринга и вызовите redux action, когда ваш компонент вновь получит фокус:

<NavigationEvents onDidFocus={() => this.props.resetFieldsAction()} />