如何在我的应用程序中编写 redux connect 和 withCookies？答案

【问题标题】：How do I compose redux connect and withCookies in my App?如何在我的应用程序中编写 redux connect 和 withCookies？
【发布时间】：2018-12-08 05:25:21
【问题描述】：

我在我的 react 应用程序中使用 react-cookies 和 react-redux，我正在尝试编写它们，但是当我这样做时，我收到了这个错误：

您必须将组件传递给 connect 返回的函数。反而收到{}

下面是我的代码：

//index.js
ReactDOM.render(
  <CookiesProvider>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </Provider>
  </CookiesProvider>,
  document.querySelector("#root") //Id root at index.html
);

//App.js
class App extends Component {
  componentDidMount() {
    this.props.fetchUser();
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <div className="container">
            <Route exact path="/" render={() => (<Login cookies={this.props.cookies}/>)} />
            <Route exact path="/surveys" render={() => (<Landing cookies={this.props.cookies}/>)} />
            <Route exact path="/login" component={Landing} />
            <Route exact path="/surveys/new" component={SurveyNew} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default connect(
  null,
  actions
)(withCookies(App));

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

redux 中的 connect 函数期望获取 react 组件作为参数，但 withCookies 可能返回不同的值。

所以把导出功能改成下面试试。

export default withCookies(connect(null, actions)(App));

【讨论】：