response-redux: недопустимый тип элемента

Question

Я пытаюсь использовать избыточность в моем реактивном проекте, и у меня возникает проблема, когда используется метод "connect ()" из "act-redux ".

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

Когда я пытаюсь подключить компонент приложения:

import React from "react";
import PrivateRoute from "react-private-route";
import { connect } from "react-redux";
import { Router, Route, Switch } from "react-router-dom";
import { createBrowserHistory } from "history";
import { Auth } from "aws-amplify";

import indexRoutes from "routes/index";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
      return (<Router>[...]</Router>);
  }
}

function mapStateToProps(state) {
  console.log(state);
  return {
    myInfo: state
  };
}
const mapDispatchToProps = dispatch => {
  return {
    test: () => dispatch({ type: "TEST", payload: {} })
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Я получаю ошибку:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: object.

Answer 1

Как уже упоминалось в комментарии, решение заключается в том, чтобы обернуть ваше приложение в <Provider></Provider>, что делает хранилище доступным для вложенных компонентов, использующих connect().Если вы используете реагирующий маршрутизатор v4, вы должны также использовать <ConnectedRouter> вместо простого маршрутизатора.

Хороший рабочий пример можно найти в их документации Github

import { ConnectedRouter } from 'connected-react-router'
import { Provider } from 'react-redux'

<Provider store={store}>
    <ConnectedRouter history={history}> { }
        ...
    </ConnectedRouter>
</Provider>