Проблема с вызовом метода действия через диспетчеризацию с webext-redux в расширении браузера - PullRequest
0 голосов
/ 06 марта 2020

Я пытаюсь вызвать apiAction в методе конструктора через диспетчерский метод приращения в ReactJS Компонент:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './styles.scss'
import { fetchData, testSet } from '../../../../../event/src/cg-store/actions';

class AppDetails extends Component {
  constructor(props) {
    super(props);
    this.state ={
      testowaZmienna: ''
    }
    this.props.fetchData('5576900');
  }

  componentDidMount() {
    document.addEventListener('click', () => {
      this.props.addCount()
    });
    this.props.testSet()
    this.props.fetchData('5576900');
    console.log('dhsadhnaskjndaslndsadl-----------------------------------------')
  }

  render() {
    const { error, test, count, testSetData, data } = this.props;
    return (
      <div>
        TEST--------------------------
        Count: {count}
        Error: {error}
        Test: {test}
        TestSet: {testSetData}
        Fetch: {data[0]}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.count,
    test: state.cg.test,
    data: state.cg.data,
    error: state.cg.error,
    testSetData: state.cg.testSet,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: (offerId) => dispatch(fetchData(offerId)),
    addCount: () => dispatch({
      type: 'ADD_COUNT'
    }),
    testSet: () => dispatch(testSet()),
  };
};

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

Как вы можете видеть, есть методы addCount, testSet и fetchData. addCount и testSet работают, но проблема в fetchData:

Это метод apiAction:

const fetchProductsPending = () => {
  return {
    type: actionTypes.FETCH_DATA_PENDING
  };
};

const fetchProductsSuccess = fetchedData => {
  return {
    type: actionTypes.FETCH_DATA_SUCCESS,
    data: fetchedData
  };
};

const fetchProductsError = errorMessage => {
  return {
    type: actionTypes.FETCH_DATA_ERROR,
    error: errorMessage
  };
};

export const testSet = () => {
  return {
    type: actionTypes.TEST_SET
  };
};
export const fetchData = (offerId) => (dispatch) => {
  console.log('Im inside fetch before set pending'); // It does not want to go here
  dispatch(fetchProductsPending());
  axios
    .get(config.api.host + offerId, {
      headers: {
        "Content-Type": "application/json",
      }
    })
    .then(response => {
      return response.data;
    })
    .then(response => {
      dispatch(fetchProductsSuccess(response.data));
      console.log("Fetch data success: ----------------------");
      console.log(response.data);
    })
    .catch(error => {
      dispatch(fetchProductsError(error.statusText));
      console.log("Fetch data success: ----------------------");
      console.log(error);
    });
};

Итак, как вы видите, testSet работает нормально, но fetchData не хочет работать. Что я делаю не так?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...