10

redux を 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: 未定義のプロパティ 'マップ' を読み取ることができません

私が見つけた唯一の解決策は、{children} の代わりにこれを使用することです:

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

これは本当に適切な方法ですか？

4

2 に答える 2

3

react-redux を使用する

状態またはアクション作成者を React コンポーネントの に挿入するために、Redux の公式 React バインディングからprops使用できます。connectreact-redux

connect hereのドキュメントをチェックする価値があります。

質問で指定されている内容に基づく例として、次のようにします。

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

これが機能するためには、ルート コンポーネントまたはルーターをProviderfromでラップする必要がありますreact-redux(これは上記のサンプルに既に存在します)。しかし、明確にするために：

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 コンポーネントをエクスポートするだけで、レンダリング時にアプリの状態がコンポーネントに公開されません。

于 2016-01-14T19:04:55.993 に答える
0

すべてのコンポーネントで接続を使用して状態を明示的にマッピングすることで解決しました。

export default connect(function selector(state) {
  return {
    cards: state.cards
  };
})(Show);

このようにして、コンポーネントがアクセスできる状態のプロパティを決定し、小道具の汚染を減らすことができます。ただし、これがベストプラクティスかどうかはわかりません。

于 2015-10-20T15:00:05.587 に答える