Проблема с подключением компонента к магазину Redux

Question

У меня проблемы с подключением компонента HomePage (дочерний компонент приложения) к хранилищу Redux.В componentDidMount => я пытаюсь вызвать connect в нижней части моего файла и передать в качестве второго аргумента функцию, которую я импортировал из моего файла создателя действий, которая делает выборку для моего бэкэнда для данных, которые будут установлены в хранилище React.Однако я получаю сообщение об ошибке, в котором говорится, что определенная и импортированная функция «не является функцией».Я не могу пройти мимо моего вызова componentDidMount.Я также не могу получить доступ к магазину из этого компонента.

Я пытался отправить действие прямо из моего компонента.Я использовал отладчик в каждой вызываемой функции (хотя я не делаю это после ComponentDidMount. Я также пытался использовать withRouter, чтобы обернуть мое соединение внутри.

*** Action Creator File ***

export const getSectors = ticker => {
  return dispatch => {
    fetch("http://localhost:3000/quote/sectors")
      .then(response => response.json())
      .then(data => dispatch({ type: "GET_SECTORS", data }));
  };
};
******************************************************************

*** HomePage Component File ***

import React from "react";
import styled from "styled-components";
import { connect } from "react-redux";
import { getSectors } from "../redux/actions";

export class HomePage extends React.Component {
  componentDidMount() {
    // debugger;
    this.props.getSectors("test");
  }

  render() {
    debugger;
    return (
      <HomePageWrapper>
        <div className="main">
          <div className="leftSide">
            <div> Mini Prof Card</div>
            <div>Leaderboard Card</div>
            <div>Trending news #</div>
          </div>
          <div className="feed"> two </div>
          <div className="rightSide"> three </div>
        </div>
        {/* <div className="footer">footer</div> */}
      </HomePageWrapper>
    );
  }
}

const mapStateToProps = state => {
  return { state };
};

export default connect(
  mapStateToProps,
  { getSectors }
)(HomePage);

*** Client Side Error Message

TypeError: this.props.getSectors is not a function

HomePage.componentDidMount
src/containers/HomePage.js:80
  77 | export class HomePage extends React.Component {
  78 |   componentDidMount() {
  79 |     // debugger;
> 80 |     this.props.getSectors("test");
  81 |   }
  82 | 
  83 |   render() {




23 stack frames were collapsed.
(anonymous function)
src/redux/actions.js:43
  40 |   })
  41 |     .then(r => r.json())
  42 |     .then(data => {
> 43 |       dispatch({ type: "UPDATE_USER", data });
     | ^  44 |     });
  45 | } else {
  46 |   return { error: "not found" };



I was expecting to hit my debugger in my action creator file but never got there.```

Answer 1

Вы экспортируете как исходный компонент, так и подключенный компонент.

Скорее всего, вы импортируете неподключенный компонент, например import { HomePage } from "./this-file", но вы хотите использовать экспорт по умолчанию.

import HomePage from "./this-file" будет импортировать экспорт по умолчанию, представляющий собой компонент, обернутый connect.

. Я бы рекомендовал вообще не экспортировать компонент HomePage, если в этом нет необходимости, чтобы избежать этой проблемы.Или назовите его, например, HomePageBase или UnconnectedHomePage, чтобы с первого взгляда было легко увидеть, что это неправильный компонент.