ReactReduxの構造にコンポーネントとレデューサーを再利用するためのスマートなアプローチはありますか？

Question

自分のレデューサーcounterと対応するコンポーネント<Counter />をconnect（）で作成したとします。

私は、このように、counterのデータを保持し、<Provider />内<Counter />をレンダリングするstoreを作成します。

const store = createStore(counter); 

render(
    <Provider store={store}> 
    <Counter /> 
    </Provider>, 
    document.getElementById('container') 
); 

今まで、すべてが右になります。

しかし、私は、私は簡単に私の減速counterとコンポーネント<Counter />を再利用して1つのページに複数のカウンタをレンダリングしようとしたことを考えたとき、私は自分自身が苦労した...

最初に考えたのは私の心に来作成することです。複数store sおよび<Provider /> Sは次のように、これを実現するには：

const store1 = createStore(counter); 
const store2 = createStore(counter); 

render(
    <div> 
    <Provider store={store1}> 
     <Counter /> 
    </Provider> 
    <Provider store={store2}> 
     <Counter /> 
    </Provider> 
    </div>, 
    document.getElementById('container') 
); 

このアプローチは動作しますが、Reduxのの「1店舗あたりのアプリケーション」の原則と競合しています。

後、私は同じくらい私は（今のところ、減速counterおよびコンポーネント<Counter />）することができますように私が作成したものを再利用し、同時に一つだけstoreでこれを達成するために異なるアプローチの多くを試してみました。

私が出てきた、最終的な（そして実行可能な）アプローチは、次にそれを使用して、新しい減速multiCountersと新しい連結成分MultiCountersを書くことである。このアプローチは動作します

// new reducer 
const multiCounters = (state, action) => { 
    ... 
}; 

// new connected component 
const Counters = ({...}) => { 
    return (
    <div> 
     <Counter {...} /> 
     <Counter {...} /> 
     ... 
    </div> 
); 
}; 
const MultiCounters = connect(...)(Counters); 

// render 
const store = createStore(multiCounters); 

render(
    <Provider store={store}> 
    <MultiCounters /> 
    </Provider>, 
    document.getElementById('container') 
); 

をし、「1店舗」の原則を満たしますしかし、再利用したいコンポーネントをラップするために、別のコードを書く必要があります。いいえ

は、コンポーネントを再利用するために任意のよりスマートなアプローチがあり...本当に再利用されていますがコンポーネント<Counter />は、単一のカウンタ用減速counterは、このような状況では無用となりリアクトだけでは言及しないように（また、レデューサーは多分、？）ReactReduxに？

ありがとうございました！

Answer 1

reduxストアに接続された別のラッパーコンテナ（たとえば、<CountersPage />）を作成し、カウンタデータを子コンポーネント（小計）に渡すことができます（<Counter />作成したもの）。例えば

、

const store = createStore(counter); 
render(
    <Provider store={store}> 
    <CountersPage /> 
    </Provider>, 
    document.getElementById('container') 
); 

そしてラッパーコンポーネントは、あなたの<MultiCounters />に非常によく似ているが、データは小道具で合格です。

class CountersPage extends React.Component { 
    render() { 
    return (
     <div> 
     <Counter counter={this.props.counter} /> 
     <Counter counter={this.props.counter} /> 
     </div> 
    ); 
    } 
}; 
function mapStateToProps(state) { 
    return { counter: state.counter } 
} 
export default connect(mapStateToProps)(CountersPage) 

<Counter />はReduxのストアに接続し、ステートレス/プレゼンテーションコンポーネントとならないことに留意されたいです。 <CountersPage />は、ステートフルな親コンポーネント（Container）です。

Reduxの作成者がこの記事の相違点を参照してください：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.uvvzhk1eu