Ошибка в классе приложения при использовании React-Redux «connect»

Question

Я получаю следующую ошибку при попытке использовать функцию connect() из react-redux:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.

Это приложение:

import { Provider } from 'react-redux';
import configureStore from './store';
const App = class extends React.PureComponent {
  render() {
    const { title } = this.context;
    return (
      <div className="center-screen">
        {title}
        <Provider store={configureStore()}>
          <Chat />
        </Provider>
      </div>
    );
  }
};

Это соответствующий кодконец чата:

import { connect } from 'react-redux';


  ...


    const mapStateToProps = state => ({
  ...state
});
const mapDispatchToProps = dispatch => ({
  addMessage: () => dispatch(addMessage)
});

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

При использовании: «экспортировать чат по умолчанию» вместо подключения, он работает нормально.

Answer 1

Попробуйте это:

const ConnectedChat = connect(
  mapStateToProps,
  mapDispatchToProps
)(Chat);

export default ConnectedChat;

Или, возможно, вы захотите переименовать определение класса в ConnectedChat и изменить имена, чтобы вы могли импортировать его как просто чат.

Редактировать: также убедитесь, что вы импортируете компонент Chat в файл приложения, а также создателя действий addMessage, если это не так.

Answer 2

Где вы определяете Chat компонент в вашей функции подключения?

Моя обычная настройка (я использую класс, но const ConnectedChart() все равно будет такой же)

class ConnectedChart extends Component {

//// All code here render and return etc

}

const Chart = connect (mapStateToProps)(ConnectedChat);

export default Chart;

Таким образом, вы назначаете компонент Chart с помощью оператора connect, а затем экспортируете default. Я думаю, что экспорт оператора connect напрямую может вызвать ошибку, но если это не сработает, опубликуйте полный компонент диаграммы, и я посмотрю, происходит ли что-то еще

---

РЕДАКТИРОВАТЬ: на основе полного кода

попробуйте это в вашем App.js:

import React from "react";
import ReactDOM from 'react-dom';
import "./App.css";
import ConnectedChat from "./Chat";
import { Provider } from "react-redux";
import configureStore from "./store";

ReactDOM.render(
        <Provider store={configureStore()}>
          <ConnectedChat />
        </Provider>
    );

, а затем поместите экран вашего Div-центра в ConnectedChat

(если вы собираетесь добавить дополнительные компоненты позже и хотите, чтобы этот div обернул их все, создайте основной компонент приложения, такой как лендинг или что-то в этом роде, и вызовите его между вашим провайдером, а не в чате, а затем в этом компоненте лендинга выполните рендеринг div и ваш ChatComponent)

Также, если у вас нет index.js, замените 'main' в вашем package.json на этот компонент App.js