使用 React-native 和 Redux 进行集中式错误处理答案

【问题标题】：Centralized Error Handing with React-native and Redux使用 React-native 和 Redux 进行集中式错误处理
【发布时间】：2021-05-21 08:29:51
【问题描述】：

我正在集中处理react-native 中的错误。我能够做到这一点，只要在抛出错误时显示错误消息。

我已经创建了一个ErrorNotification 添加到应用程序组件层次结构的最顶部。

const App = () =>
<ErrorNotification>
    <Login />
</ErrorNotification>

//错误通知

const ErrorNotification = ({ children, errorCode, errorShow }) => {
return errorShow || errorCode ? <Error {...{errorCode}} /> : children;
};

 function mapStateToProps(state) {
return {
    errorCode: state.errorReducer.errorCode,
    errorShow: state.errorReducer.errorShow
 };
}

export default connect(mapStateToProps)(ErrorNotification);

//错误

 const Error = ({errorCode }) => {
  const errorMes = getMessageByCode(errorCode)
 return (
    <View style={styles.container}>
        <Text>{errorMes}</Text>
        <TouchableOpacity onPress={() => reuqestedByUser()}>
            <Text>Try again</Text>
        </TouchableOpacity>
    </View>
  );
};

//登录

 const Login = () => {
const reuqestedByUser = () => {
    return null;
 };
};

我的问题是...有什么方法可以从Error 屏幕操作中调用登录的reuqestedByUser() 或任何其他组件函数。

【问题讨论】：

标签： reactjs react-native redux

【解决方案1】：

是的，因为ErrorNotification 是Login 的父级，它可以将reuqestedByUser 作为道具传递给它。否则，您可以使用context API

【讨论】：

对于演示，我刚刚添加了Login。实际上会有所有组件/屏幕的容器。