Используйте состояние Redux для инициализации клиента Axios

Question

У меня есть приложение React / Electron, над которым я работаю, в котором я хочу использовать данные из своего хранилища Redux для инициализации моего клиента Axios. Например, при первой загрузке приложения пользователь вводит некоторую информацию, например, свое имя пользователя. Это передается в хранилище Redux (и сохраняется в localStorage для будущего использования), а затем используется в baseURL клиента axios для последующих сетевых запросов.

Проблема в том, что я не могу получитьaxios для работы с реактив-редуксом и функцией 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

Здесь, в документации по response-redux https://react -redux.js.org / api / connect # connect-return говорится, что 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 или что-то еще). Но если бы я решил это, я бы инициализировал Axios-клиент внутри редуктора и оставил в магазине. А затем передать его клиентам в качестве реквизита.

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

Answer 2

Вы должны запустить клиент AXIOS перед загрузкой App.js. Я рекомендую вам использовать redux-axios в качестве промежуточного программного обеспечения и использовать действие для вызова API.

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

Answer 3

В дополнение к ответу @ Ozan, в этом случае вы можете создать главный компонент, связать его с redux и отправить действие при монтировании для инициализации клиента axios.