Gibt es intelligentere Ansätze zur Wiederverwendung von Komponenten und Reduzierern in der Struktur von ReactRedux?

Question

Angenommen, ich habe meinen eigenen Reduzierer counter und die entsprechende Komponente <Counter /> erstellt von connect() geschrieben.

ich erstellen Sie dann eine store die Daten von counter und machen <Counter /> innen <Provider />, wie diese zu halten:

const store = createStore(counter); 

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

Bis jetzt geht alles richtig gemacht.

Aber als ich dachte, dass ich einfach meine Minderer counter und Komponente <Counter /> wiederverwenden können und versucht, mehrere Zähler in einer Seite zu machen, fand ich mich zu kämpfen ...

Der erste Gedanke, mir in den Sinn kam, ist zu schaffen mehrere store s und <Provider /> s, dies zu erreichen, wie:

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

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

Dieser Ansatz funktioniert, aber Konflikte mit dem „einem Speicher pro Anwendung“ Prinzip der Redux.

Später habe ich versucht, viele verschiedene Ansätze dies so viel Wiederverwendung einer store zugleich mit nur zu erreichen, was ich geschaffen habe, wie ich kann (vorerst, Druckminderer counter und Komponente <Counter />).

Der letzte (und bearbeitbar) Ansatz, den ich herauskam ist ein neues Reduktions multiCounters und eine neue verbundene Komponente MultiCounters zu schreiben, dann verwenden:

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

Dieser Ansatz funktioniert und erfüllen die „ein Geschäft“ -Prinzip , aber ich muss einen weiteren Code schreiben, um die Komponente, die ich wiederverwenden möchte, zu umbrechen. Nein zu erwähnen, was wirklich wiederverwendet wird, ist das einzige <Counter /> Reagieren Komponente, die Minderer counter für einzelne Zähler wird in dieser Situation nutzlos ...

Gibt es intelligentere Ansätze Komponenten wieder zu verwenden (auch Reduzierungen, vielleicht?) In ReactRedux ?

Vielen Dank!

Answer 1

Sie könnten einen weiteren Wrapper-Container erstellen, zum Beispiel <CountersPage />, der mit dem Redux-Speicher verbunden ist und die Zählerdaten als Props an untergeordnete Komponenten (die <Counter />, die Sie erstellt haben) übergeben.

Zum Beispiel

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

Und die Wrapper-Komponente ist sehr ähnlich wie Ihr <MultiCounters /> aber die Daten Pass von Requisiten.

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) 

Beachten Sie, dass <Counter /> nicht zu redux Speicher stellt keine Verbindung und eine staatenlos/Präsentations-Komponente geworden. <CountersPage /> ist seine Stateful Elternteile (Container).

Siehe die Unterschiede in diesem Artikel durch den Ersteller von Redux: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.uvvzhk1eu