Question

我正在学习ReactNative + Redux（Reducer + Action）。我陷入一种情况。我了解只要 setState 被调用为组件渲染调用。我面临的问题是我只有一个TextInput。当onChangeText事件被调用时，我正在管理用户输入的状态。但是现在我已经集成了Redux（Reducer + Action）机制来调用API。一旦我从Redux获得成功响应，我就会进行代码重定向到新屏幕。但是我单击后退按钮而不是将我重定向到后退屏幕，而是再次将我重定向到新屏幕。由于redux存储仍然有那些我成功存储在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}/>

处理TextInput：

 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

您可以创建一个重置流程状态值的动作，然后使用componentWillUnmount（）调用动作创建者以重置流程。

Answer 2

我不确定您当前在哪里包含重定向代码，但是仅当sendOtp.Status转换为“成功”时，您才能调用Navigation吗？像这样：

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

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

2 个答案: