単にルータとの状態管理を使用してください

Question

私は、反応ルータで反応状態管理を使用する最も簡単な方法を理解しようとしています。ルータはReduxのような状態コンテナでうまく動作しますが、Reactを使用して状態を管理したい場合はどうなりますか？単一のルートコンポーネントに状態を格納し、それを子コンポーネントに小道具として明示的に渡す場合はどうでしょうか。そして、コードをきれいに見せて効率的にしたいですか？

最も簡単な解決策は、子の子コンポーネントとしてルータを使用することですが、私はそれがこのように動作しません知っている：

import { Component } from 'react' 
import { Router, Route, hashHistory } from 'react-router' 
import { Catalog, Cart, Checkout } from './shopping' 
import { Menu, Errors } from './navigation' 
import { render } from 'react-dom' 

class App extends Component { 

    constructor(props) { 
    super(props) 
    this.state = { 
     inventoy: [ ... ], 
     cart: [ ... ]   
    } 
    } 

    render() { 
    return (
     <div className="app"> 
     <Menu /> 
     <Router history={hashHistory}> 
      <Route path="/" component={Catalog} inventory={inventory} /> 
      <Route path="/cart" component={Cart} cart={cart} /> 
     </Router> 
     <Errors /> 
     </div> 
    ) 
    } 
} 

render(<App />, document.getElementById('target')) 

だから、ルータが親になりたいと思っているようだし、アプローチはネストされたルートになります。しかし、あなたは子供たちのすべてに状態変数の全てを要素のクローンを作成し、明示的に渡すために持っていることを行うには：

import { Component } from 'react' 
import { Router, Route, hashHistory } from 'react-router' 
import { Catalog, Cart, Checkout } from './shopping' 
import { Menu, Errors } from './navigation' 
import { render } from 'react-dom' 

class App extends Component { 

    constructor(props) { 
     super(props) 
     this.state = { 
      inventoy: [ ... ], 
      cart: [ ... ] 
     } 
    } 

    render() { 

     const { children } = this.props 
     const { inventory, cart } = this.state 

     return (
      <div className="app"> 
       <Menu /> 
       {React.cloneElement(children, {inventory, cart})} 
       <Errors /> 
      </div> 
     ) 
    } 
} 

render(
    <Router history={hashHistory}> 
     <Route path="/" component={App}> 
      <Route path="/" component={Catalog} /> 
      <Route path="/cart" component={Cart} /> 
     </Route> 
    </Router>, 
    document.getElementById('target') 
) 

問題このこのアプローチは、余分なデータは、ネストされたコンポーネントに渡されていることです。カートコンポーネントはインベントリを必要としませんが、それを取得します。カタログコンポーネントはカートデータを必要としませんが、それはとにかくです。明らかに、これは多くの状態と多くの状態データで制御不能になる可能性があります。クローンコンポーネントも効率的ではないようです。

ルーターを使用してルートコンポーネントから子コンポーネントに状態を渡す簡単な方法がありますか、またはルータを操作するときに常にreduxのような状態コンテナを使用する必要がありますか？

反応状態は素晴らしいですが、反応ルータは素晴らしいです。それらを一緒に使用するより良い方法はありますか？初心者が簡単に組み込むことができるだけのシンプルなルータですか？

Answer 1

非常に簡単なルーティングの代替ソリューションが見つかりました。それは、異なるルートに対して同じコンポーネントを再利用することであり、コンポーネント内でlocation.pathnameまたはparamsをチェックすることによって適切な要素を表示します。

render(
     <Router history={hashHistory}> 
     <Route path="/" component={App} /> 
     <Route path="/cart" component={App} /> 
     <Route path="/catalog/:category" component={App} /> 
     </Router>, 
     document.getElementById('target') 
    ) 

すべてがアプリケーションコンポーネントをレンダリングしますが、アプリケーションのレンダリング用のmehtodでルータの小道具を使用できます。

render() { 

    var currentLocation = this.props.location.pathname 
    var category = this.props.params.category 

}