使用 Redux 状态初始化 Axios 客户端答案

【问题标题】：Use Redux state to initialize Axios client使用 Redux 状态初始化 Axios 客户端
【发布时间】：2020-02-22 22:13:32
【问题描述】：

我正在开发一个 React/Electron 应用程序，我想在其中使用我的 Redux 存储中的数据来初始化我的 Axios 客户端。用例是，例如，在第一次加载应用程序时，用户输入一些信息，比如他们的用户名。这被推送到 Redux 存储（并持久化在 localStorage 中以供将来使用），然后在 axios 客户端的 baseURL 中用于后续网络请求。

问题是，我无法让 axios 与 react-redux 和 connect() 函数一起使用。 Axios 的函数导出似乎被导出的 HOC 隐藏了，每当我调用它的一个函数时，我都会收到以下错误：

TypeError: _Client2.default.get is not a function

我的客户看起来像这样：

import axios from "axios";
import { connect } from "react-redux";

const Client = ({ init }) => {
  return axios.create({
    baseURL: `http://${init.ip}/api/${init.username}`
  });
};

const mapStateToProps = state => {
  return { init: state.init };
};

export default connect(
  mapStateToProps,
  {}
)(Client);

我在这里做错了什么？

【问题讨论】：

标签： javascript reactjs redux axios

【解决方案1】：

在 react-redux 文档 https://react-redux.js.org/api/connect#connect-returns 中，它说 The return of connect() is a wrapper function that takes your component and returns a wrapper component with the additional props it injects. 所以它返回包装反应组件的反应组件。您的函数返回 axios 客户端，它不呈现任何内容。

我更喜欢使用动作创建者并在那里进行 api 调用（因此我不通过 axios 客户端或其他什么）。但是如果我决定这样做，我会在 reducer 中初始化 axios 客户端并保存在 store 中。然后将其作为道具传递给客户。

const mapStateToProps = state => {
  return { axios: state.axios };
};

【讨论】：

【解决方案2】：

在@Ozan 的回答之上，在这种情况下，您可以做的是创建一个主组件，将其与 redux 连接并在 mount 上调度一个操作以初始化 axios 客户端。

【讨论】：

【解决方案3】：

您应该在加载 App.js 之前启动 AXIOS 客户端。推荐你可以使用 redux-axios 作为 redux 中间件，使用 action 调用 api。

https://github.com/svrcekmichal/redux-axios-middleware

【讨论】：