Попытка получить данные с помощью axios.get (), но Promise никогда не возвращает

Question

В настоящее время я пытаюсь обновить редуктор Redux с помощью запроса get до https://jsonplaceholder.typicode.com,. Я могу свернуть этот сайт со своего ноутбука, но когда я пытаюсь использовать axios.get (URL / data) из моего приложения, данные никогда не регистрируется, поэтому я предполагаю, что обещание никогда не вернется? Я за прокси, но у меня настроены NodeJ для прокси, поэтому я не уверен, нужно ли мне передавать некоторые дополнительные данные аксио, связанным с прокси, или не выполнять внешние запросы GET. В основном логика приложения должна разворачиваться следующим образом:

GET Data from site with axios and is logged in firefox web console->reducer is passed payload from GET-> reducer fills each object in data into an array->View updated listing all objects in array on screen with the .map function.

Ниже приведен редуктор, который получает данные и обновляет хранилище:

import axios from 'axios';

import { SUCCESS } from 'app/shared/reducers/action-type.util';

export const ACTION_TYPES = {
  GET_APP_COMMENTS: 'applicationComments/GET_COMMENTS'
};

const initialState = {
  postId: 1,
  id: 1,
  name: 'testname',
  email: 'testemail',
  body: 'body'
};

export type ApplicationCommentsState = Readonly<typeof initialState>;

    export default (state: ApplicationCommentsState = initialState, action): ApplicationCommentsState => {
      switch (action.type) {
        case SUCCESS(ACTION_TYPES.GET_APP_COMMENTS):
          const { data } = action.payload;
          return {
            ...state,
            postId: data.postId,
            id: data.id,
            name: data.name,
            email: data.email,
            body: data.body
          };
        default:
          return state;
      }
    };

    export const getComments = () => ({
      type: ACTION_TYPES.GET_APP_COMMENTS,
      payload: axios.get('https://jsonplaceholder.typicode.com/comments')
      .then(res => {
        console.log('got here' + res);
      })
    });

Я установил этот редуктор в файле Redux index.js, где я объединяю все редукторы:

import { combineReducers } from 'redux';
import { loadingBarReducer as loadingBar } from 'react-redux-loading-bar';

import authentication, { AuthenticationState } from './authentication';
import applicationProfile, { ApplicationProfileState } from './application-profile';
import applicationComments, { ApplicationCommentsState } from './application-comments'; // Is this the correct way to import the comments reducer?

import administration, { AdministrationState } from 'app/modules/administration/administration.reducer';
import userManagement, { UserManagementState } from 'app/modules/administration/user-management/user-management.reducer';
import register, { RegisterState } from 'app/modules/account/register/register.reducer';
import activate, { ActivateState } from 'app/modules/account/activate/activate.reducer';
import password, { PasswordState } from 'app/modules/account/password/password.reducer';
import settings, { SettingsState } from 'app/modules/account/settings/settings.reducer';
import passwordReset, { PasswordResetState } from 'app/modules/account/password-reset/password-reset.reducer';

export interface IRootState {
  readonly authentication: AuthenticationState;
  readonly applicationProfile: ApplicationProfileState;
  readonly applicationComments: ApplicationCommentsState;
  readonly administration: AdministrationState;
  readonly userManagement: UserManagementState;
  readonly register: RegisterState;
  readonly activate: ActivateState;
  readonly passwordReset: PasswordResetState;
  readonly password: PasswordState;
  readonly settings: SettingsState;
  /* jhipster-needle-add-reducer-type - JHipster will add reducer type here */
  readonly loadingBar: any;
}

const rootReducer = combineReducers<IRootState>({
  authentication,
  applicationProfile,
  applicationComments,
  administration,
  userManagement,
  register,
  activate,
  passwordReset,
  password,
  settings,
  /* jhipster-needle-add-reducer-combine - JHipster will add reducer here */
  loadingBar
});

export default rootReducer;

Я вызываю метод getComments, который был передан в качестве опоры в следующем компоненте, это должно вызвать console.log, но это не так, и компонент все равно рендерится:

import './appView.css';

import React from 'react';
import { Link } from 'react-router-dom';
import { CommentsSection } from './appView-componets';
import { connect } from 'react-redux';
import { Container } from 'reactstrap';

import { getSession } from 'app/shared/reducers/authentication';
import { getComments } from 'app/shared/reducers/application-comments';

export interface IAppViewState {
  dropdownOpen: boolean;
}

export interface IAppViewProp extends StateProps, DispatchProps, IAppViewState {}

export class AppView extends React.Component<IAppViewProp> {
  state: IAppViewState = {
    dropdownOpen: false
  };

  componentDidMount() {
    this.props.getSession();
    this.props.getComments();
  }

  toggleCatagories = () => {
    this.setState({ dropdownOpen: !this.state.dropdownOpen });
  };

  render() {
    const comments = this.props;
    console.log('comments: ' + comments);
    return (
      <div>
        <CommentsSection comments={comments} />
      </div>
    );
  }
}

const mapStateToProps = storeState => ({
  account: storeState.authentication.account,
  isAuthenticated: storeState.authentication.isAuthenticated,
  comments: storeState.applicationComments.comments
});

const mapDispatchToProps = { getSession, getComments };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AppView);

Answer 1

Я попытался запрос в моем приложении, и, кажется, работает нормально. Я не уверен, что вы правильно настроили свое действие для использования промежуточного программного обеспечения Thunk. Может быть, попробуйте.

export const getCommentSuccess = (comments) => {
    return {
        type: ACTION_TYPES.GET_APP_COMMENTS,
        comments
    }
}

export const getComments = () => {
    return function(dispatch) {
        return axios.get('https://jsonplaceholder.typicode.com/comments').then(response => {
            console.log(response) //This should be the returned comments
            dispatch(getCommentSuccess(response));
        }).catch(error => {
            throw(error);
        });
    };

И убедитесь, что ваше промежуточное ПО правильно импортировано в ваш магазин.

import thunkMiddleware from 'redux-thunk';

const store = createStore(rootReducer, 
    applyMiddleware(
        thunkMiddleware
    )
);

Answer 2

Существуют библиотеки с поддержкой избыточности, такие как RxJs (Observables), Redux Saga, Redux Thunk и другие, которые интегрированы с Redux и могут использоваться для обработки действий и взаимодействия с бэкэндом в сочетании с axios. Если вы хотите использовать просто axios (это библиотека для прямых звонков на сервер), вам нужно обернуть вызов так, чтобы вы сначала отправили ex. GET_COMMENTS_START действие без полезной нагрузки (может быть, URL) и внутри редуктора вы делаете вызов на сервер, используя Axios. Когда обещание Axios будет выполнено, вы должны запустить другое действие, такое как GET_COMMENTS_SUCCESS, которое затем вернет данные, которые будут вашей полезной нагрузкой, а затем вы сможете получить их через реквизиты. Этот подход может работать, но вы должны использовать специальные библиотеки редуксов, такие как ReduxThunk или RxJs, потому что код гораздо более согласован и удобен в обслуживании. Полезные ссылки:

1. https://rxjs -dev.firebaseapp.com /
2. https://redux -saga.js.org /
3. https://github.com/reduxjs/redux-thunk