Question

在React Native + Redux环境中，我需要一些关于如何在用户触发事件时参数化我需要调用的URL的前缀的建议或最佳实践。

这是我到目前为止的虚拟版本：

import { connect } from "react-redux";
import actions from "../actions/actions";
import MyWidget from "../components/MyWidget";

export const mapStateToProps = state => {
    return {
        itemDetails: state.itemDetails
    };
};

const pushItem = (dispatch, itemDetails) => {
    fetch("http://xxx.xxx.xxx.xxx:xxxx/myapp/rest/item/" + itemDetails.id, {
        method: "PUT",
        body: itemDetails
    })
        .then(response => {
            dispatch(actions.hideSpinner());
        })
        .catch(error => {
            console.log(error);
            dispatch(actions.hideSpinner());
        });
};

const mapDispatchToProps = dispatch => {
    return {
        saveItem: itemDetails => {
            dispatch(actions.showSpinner());
            pushItem(dispatch, itemDetails);
        }
    };
};

const MyWidgetCtrl = connect(mapStateToProps, mapDispatchToProps)(MyWidget);

export default MyWidgetCtrl;

当用户点击按钮时，将调用saveItem函数。这很好用，但我的问题是http://xxx.xxx.xxx.xxx:xxxx/myapp部分是硬编码的，我希望它来自我的应用程序的设置。我想在启动时使用AsyncStorage拉动设置并将它们放在Redux存储中，然后调整上面的代码以从状态获取URL前缀;但问题是mapDispatchToProps函数没有将redux状态作为参数接收，因此不会起作用。

有关如何解决此问题的任何建议吗？

编辑：请注意，我事先并不知道API网址前缀，因此我无法在编译时将其放入配置文件中。实际上，用户在第一次使用该应用时会在提示中键入API前缀。

Answer 1

您可以使用react-native-config npm模块将配置变量公开给React Native中的javascript代码，同时支持iOS和Android。

您可以在React Native应用的根目录中创建.env。
```
 API_URL = http://xxx.xxx.xxx.xxx:xxxx/myapp
```

然后从您的应用中访问那里定义的变量。

 import Config from 'react-native-config'
 ...
 ...
 fetch(`Config.API_URL/itemDetails.id`, {
      method: "PUT",
      body: itemDetails
 })

如果将API前缀作为用户的输入，那么它可以在状态/ redux存储中维护，您可以拥有一个http实用程序，它可以作为应用程序的所有http调用的网关，以及你可以从商店访问道具。

如何配置＆＃39;获取＆＃39;使用react native + redux的用户触发事件的URL？

1 个答案: