У меня есть приложение 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);

Что я здесь не так делаю?

0
tobiasfried

3 ответа

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

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

Здесь, в документации о реагировании на избыточность, https://react-redux.js.org/ api / connect # connect-return там говорится, что return connect () - это функция-обертка, которая принимает ваш компонент и возвращает компонент-обертку с дополнительными подпрограммами, которые он добавляет. Таким образом, он возвращает реагирующий компонент, который оборачивает реагирующий компонент. Ваша функция возвращает клиент Axios, он ничего не отображает.

Я предпочитаю использовать создателей действий и совершать там вызовы API (поэтому я не передаю Axios-клиент или что-то еще). Но если бы я решил это, я бы инициализировал Axios-клиент внутри редуктора и оставил в магазине. А затем передать его клиентам в качестве реквизита.

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