Как управлять состоянием компонента для изменения TextInput при использовании Redux? - PullRequest
Новая
       27

Как управлять состоянием компонента для изменения TextInput при использовании Redux?

1 голос
/ 15 мая 2019

Я изучаю ReactNative + Redux (Редуктор + Действие).Я застрял в одном сценарии.Я понимаю, что всякий раз, когда setState получает вызовы вызываемого компонента.Проблема, с которой я сталкиваюсь, у меня есть один TextInput.когда вызывается событие onChangeText, я управляю пользовательским вводом в состояние.Но теперь у меня есть встроенный механизм Redux (Reducer + Action) для вызова API.как только я получил ответ от Redux, я перенаправил новый экран.но когда я нажимаю кнопку «назад» вместо того, чтобы перенаправить меня на задний экран, он снова перенаправляет меня на новый экран.Из-за избыточного магазина есть еще тот ответ API, который я сохранил на API успеха.Итак, в конце концов я решил управлять изменениями текста TextInput с использованием избыточного состояния, но я чувствую, что это неправильный подход.Пожалуйста, помогите мне в этом сценарии.

Код TextInput (я создаю общий компонент EditText с TextInput): 

<EditText
   value={this.props.api.textPhoneNumber}
   placeHolderText={Strings.phone_number}
   inputType={'numeric'}
   secureText={false}
   maxInputLength={10}
   onChangeText={this.handlePhoneNumberChange}/>

Обработка ввода текста: 

 handlePhoneNumberChange = (phoneNumber) => {
        this.props.phoneNumberInputChange(phoneNumber);
    };
constructor(props) {
        super(props);
        this.handlePhoneNumberChange = this.handlePhoneNumberChange.bind(this);
    }

Действия: 

export const phoneNumberChanged = (phoneNumber) => {
    return dispatchResponse(phoneNumber, PHONE_NUMBER_CHANGE)
};

Редукторы: 

 case PHONE_NUMBER_CHANGE:
            return {...state, textPhoneNumber: action.payload, errorResponse: {}, sendOtp: {}, checkOtp: {}};

Код для перенаправленияКогда получится API: 

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.api.sendOtp.Status === 'Success') {
        this.props.navigation.navigate('AuthenticateOTP')
    }
}

Итак, основная проблема в том, как я могу совместно управлять состоянием компонентов и состоянием Redux?или мне нужно выполнять каждую задачу, используя только состояние Redux?

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Вы можете создать действие, которое сбрасывает значения состояния процесса, а затем вызывать создателя действия с помощью componentWillUnmount () для сброса процесса.

0 голосов
/ 15 мая 2019

Я не уверен, где вы в настоящее время включаете свой код перенаправления, но вы могли бы вызвать навигацию только тогда, когда sendOtp.Status переходит в «Успех»? Примерно так: 

componentWillReceiveProps(newProps: CustomerDetailProps) {
    if(this.props.api.sendOtp.Status != 'Success' && newprops.api.sendOtp.Status == 'Success'){
        this.props.navigation.navigate('AuthenticateOTP')
    }
}
...