使用 Redux 时如何管理 TextInput 更改的组件状态？

Question

我正在学习 ReactNative + Redux(Reducer + Action)。我被困在一种情况下。我知道每当 setState 被调用时组件渲染调用。我面临的问题是我有一个 TextInput。当调用 onChangeText 事件时，我正在管理用户对状态的输入。但是现在我已经集成了 Redux(Reducer + Action) 机制来调用 API。一旦我从 Redux 获得成功响应，我就编写代码来重定向新屏幕。但是当我单击后退按钮而不是将我重定向到后屏幕时，它再次将我重定向到新屏幕。因为 redux store 仍然有我在 api 成功时存储的那些 api 响应。所以最后我决定使用 redux 状态来管理 TextInput 文本更改，但我觉得这是错误的方法。请为我指导这种情况。

TextInput 代码（我创建了具有 TextInput 的通用组件 EditText）：

<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 状态来完成每项任务？

Answer 1

我不确定您目前在哪里包含重定向代码，但您能否仅在 sendOtp.Status 转换为 'Success' 时调用导航？像这样：

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

Answer 2

您可以创建一个重置流程状态值的操作，然后使用 componentWillUnmount() 调用操作创建者来重置流程。

使用 Redux 时如何管理 TextInput 更改的组件状态？

How to manage component state for TextInput change while using Redux?

reactjs

react-native

redux

react-redux

react-native-navigation