如何将redux状态传递给子路由？ [英] How to pass redux state to sub routes?

问题描述

我很难理解如何将redux与react-router一起使用。

I have a hard time understanding how to use redux together with react-router.

index.js

[...]

// Map Redux state to component props
function mapStateToProps(state)  {
  return {
    cards: state.cards
  };
}

// Connected Component:
let ReduxApp = connect(mapStateToProps)(App);

const routes = <Route component={ReduxApp}>
  <Route path="/" component={Start}></Route>
  <Route path="/show" component={Show}></Route>
</Route>;

ReactDOM.render(
  <Provider store={store}>
    <Router>{routes}</Router>
  </Provider>,
  document.getElementById('root')
);

App.js

import React, { Component } from 'react';

export default class App extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <div>
      Wrapper
        {children}
      </div>
    );
  }
}

Show.js

import React, { Component } from 'react';

export default class Show extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ul>
        {this.props.cards.map(card => 
          <li>{card}</li>
        )}
      </ul>
    );
  }
}

此抛出

未捕获的TypeError：无法读取未定义的属性'map'

Uncaught TypeError: Cannot read property 'map' of undefined

唯一的解决方案我发现是使用它而不是{children}：

The only solution I've found is to use this instead of {children}:

{this.props.children &&
 React.cloneElement(this.props.children, { ...this.props })}

这真的是正确的方法吗？

Is this really the proper way to do it?

推荐答案

使用react-redux

为了将任何状态或动作创建者注入React组件的 props ，您可以使用<$ c $从 react-redux connect c> 这是Redux的官方React绑定。

In order to inject any state or action creators into the props of a React component you can use connect from react-redux which is the official React binding for Redux.

值得查看 connect 此处 。

作为基于问题中指定内容的示例，您可以执行以下操作：

As an example based on what is specified in the question you would do something like this:

import React, { Component } from 'react';
// import required function from react-redux
import { connect } from 'react-redux';

// do not export this class yet
class Show extends React.Component {
  // no need to define constructor as it does nothing different from super class

  render() {
    return (
      <ul>
        {this.props.cards.map(card => 
          <li>{card}</li>
        )}
      </ul>
    );
  }
}

// export connect-ed Show Component and inject state.cards into its props.
export default connect(state => ({ cards: state.cards }))(Show);

为了实现这个目的，你必须用你的根组件或路由器包裹提供商来自 react-redux （这已在上面的示例中提供）。但为了清楚起见：

In order for this to work though you have to wrap your root component, or router with a Provider from react-redux (this is already present in your sample above). But for clarity:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';

import { createStore } from 'redux';
import { Provider } from 'react-redux';

import reducers from './some/path/to/reducers';

const store = createStore(reducers);

const routes = <Route component={ReduxApp}>
  <Route path="/" component={Start}></Route>
  <Route path="/show" component={Show}></Route>
</Route>;

ReactDOM.render(
  // Either wrap your routing, or your root component with the Provider so that calls to connect have access to your application's state
  <Provider store={store}>
    <Router>{routes}</Router>
  </Provider>,
  document.getElementById('root')
);

如果任何组件不需要注入任何状态或动作创建者，那么您只需导出哑React组件，在渲染时，你的应用程序状态都不会暴露给组件。

If any components do not require injection of any state, or action creators then you can just export a "dumb" React component and none of the state of your app will be exposed to the component when rendered.

这篇关于如何将redux状态传递给子路由？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！