Question

我有一个正在使用的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);

我在这里做什么错了？

Answer 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.因此返回包装了react组件的react组件。您的函数返回axios客户端，它不呈现任何内容。

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

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

Answer 2

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

Answer 3

您应该在加载App.js之前启动AXIOS客户端。我建议您可以将redux-axios用作redux中间件，并使用操作来调用api。

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

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

3 个答案: