Question

我正在尝试在我的react项目上使用redux，但是当使用“ react-redux”中的“ connect（）”方法时遇到问题。

我创建了我需要的存储区和化简器，但是当我尝试连接组件时，什么也没有显示，并且出现错误。

当我尝试连接组件App时：

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);

我得到了错误：

元素类型无效：预期为字符串（对于内置组件）或类/函数（用于复合组件）但得到了：对象。

Answer 1

如评论中所述，解决方案是将您的应用程序包装在<Provider></Provider>中，这使存储可用于使用connect()的嵌套组件。如果您使用的是React Router v4，则还应该使用<ConnectedRouter>而不是简单路由器。

可以在their Github docs

中找到一个有效的示例

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

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

react-redux：元素类型无效

1 个答案: