8

react-router-redux を使用すると、ルーティング情報を取得する唯一の方法は props のみであるかのように見えます。これは正しいですか?

現在、アプリで行っていることは大まかに次のとおりです。

<Provider store={Store}>
  <Router history={history}>
    <Route path="/" component={App}>
      <Route path="child/:id" />
    </Route>
  </Router>
</Provider>

アプリ

const App = (props) => 
  <div className="app">
    <Header />
    <Main {...props}/>
    <Footer />
  </div>

主要

const Main = (props) => 
  <div>
    <MessageList {...props}/>
  </div>

メッセージリスト

let MessageList = (props) => {
  const {id} = props;

  // now I can use the id from the route
 }

const mapStateToProps = (state, props) => {
  return {
    id: props.params.id
  };
};

MessageList = connect(mapStateToProps)(MessageList)

私がやりたいこと、すべてのコンポーネントから {...props} を削除し、MessageList を次のように変更することです。

let MessageList = (props) => {
  const {id} = props;

  // now I can use the id from the route
 }

const mapStateToProps = (state) => {
  return {
    id: state.router.params.id
  };
};

MessageList = connect(mapStateToProps)(MessageList)

すべてに props を渡さなければならないことは、Redux が自分のアプリケーションをどれだけきれいに作ったかという点で大きな後退のように感じます。したがって、パラメータを渡すことが正しい場合、なぜそれが望ましいのでしょうか?

これを引き起こした私の特定のケース:

メッセージを送信する (SEND_MESSAGE アクションをディスパッチする) UserInput コンポーネントがあります。現在のページ (チャット ルーム、メッセージ フィード、単一のメッセージなど) に応じて、リデューサーはそれを正しい場所に配置する必要があります。しかし、react-redux-router では、リデューサーはルートを認識していないため、メッセージの送信先を認識できません。

これを修正するには、props を渡し、ID を SEND_MESSAGE アクションに添付する必要があります。そうでなければ、単純な UserInput がアプリケーションのビジネス ロジックを処理します。

4

1 に答える 1