ist es möglich, verschachtelte Reduzierungen in redux zu haben?

Question

eine App mit initialStore = {users: {}} gegeben, in der jeder Benutzer in Benutzer über seine ID als Schlüssel gespeichert wird, wenn eine Komponente eine Liste von Benutzern anzeigt, wenn ein einzelner Benutzer innerhalb dieses Objekts aktualisiert wird, wird die gesamte Liste re -Rendered, was erwartet wird, da der Reducer ein neues Objekt als einen Zustand zurückgegeben hat, obwohl alles, was der Reducer tatsächlich benötigte, einen einzigen Schlüssel änderte.

Beispielcode

ducks/users.js 
const LoadAllAction =()=>({ type:'USERS/LOAD',users:{1:{id:1,if:0},2:{id:2,if:0}} }); 
const LoadSingleAction =()=>({ type:'USERS/SINGLE',user:{id:2,if:1} }); 

//THIS REDUCER HANDLE THE USERS SLICE OF STORE 
const reducer = (state={},action)=>{ 

if(action.type === 'USERS/LOAD')return action.users; 

if(action.type === 'USERS/SINGLE')return Object.assign({},state,{[action.user.id]:action.user}); 

return state; 
} 

const rootReducer = combineReducers({users:reducer}); 
const store = createStore(rootReducer, {users:{}}); 

oben ist eine Einrichtung des Problems Ich unter .. jetzt ein einfaches Reagieren Komponente gegeben, die

const UsersPage = props=>(
    <ul> 
     {Object.keys(props.users).map((u)=>(
      <li key={u.id}>ID :: {u.id}</li> 
     ))} 
    </ul> 
); 

const mapStateToProps(state)=>({users:state.users}); 

const component = connect(mapStateToProps)(UsersPage); 

nun in der Komponente oben zu speichern verwenden eine Verbindung zu abonnieren Wenn ein einzelner Benutzer den Benutzerspeicher ändert, wird die gesamte usersPage-Komponente erneut gerendert.

vorausgesetzt, dass Benutzer speichern kann über 10.000 Benutzer halten. Wie kann ich meine Reducer/Redux-Struktur aktualisieren, so dass, wenn ein einzelner Benutzer innerhalb des Benutzerspeichers aktualisiert wird .. nur Komponenten, die diesen einzelnen Benutzer anhören, erneut rendern?

i versucht, die oben ul in zwei Komponenten Puting Li in separate Komponente und den Anschluss an redux Ansicht verbinden Passieren der

///LiComponent connect function example 
const mapStateToProps(state,ownProps)=>({users:state.users[ownProps.key]}); 

doch jetzt sowohl ul und Li Wieder rendert aufzuspalten. so kam es zu mir, dass das Problem ist, dass mein Reducer jedes Mal, wenn es einen einzelnen Benutzer aktualisieren muss, einen neuen Benutzerspeicher zurückgibt, also muss ich einen Unterreduzierer für jeden Benutzer haben, wenn ich dies verhindern möchte.

aber von dem, was ich verstehe redux speichern müssen flach sein und reducers nur Scheibe durch Schlüssel, nicht durch Unterschlüssel.

-ist es möglich/UND NORMAL/dass Sie reducers in Redux nest?

mit normal ich meine ich sah Tonnen von einfachen todos apps herum, die noch nie eine echte Welt groß angelegte App-Struktur da draußen gesehen haben, die uns aus diesem herausführen kann, also wie macht Redux Gurus dies während der Planung dort apps?

Answer 1

Erstens: Ja, es ist absolut möglich, Reduzierfunktionen auf verschiedene Weise zu verschachteln. Sie sind schließlich nur Funktionen, und es liegt ganz bei Ihnen, wie Sie diese Logik aufbauen wollen. Der Standardansatz für das Problem, das Sie beschreiben, ist Normalisieren Ihren Zustand, so dass Sie "Nachschlagetabellen" haben, wo jedes Element nach seiner ID und Arrays von IDs, die alle Elemente darstellen können, gesucht werden kann . Die Elternliste würde dann verbunden werden, ein Array von IDs abrufen und eine ID an jedes Kindlistenelement übergeben. Jede Listenelementkomponente würde verbunden sein, ihre Element-ID als eine Stütze erhalten und diese verwenden, um ihr eigenes Element in nachzuschlagen.

Ich habe eine Reihe von Links bekommen, die diese Art von Ansätzen beschreiben:

• Zuerst wird ein Chat-Protokoll, wo ich genau dieses Szenario beschreiben: https://gist.github.com/markerikson/53735e4eb151bc228d6685eab00f5f85 zu Artikel
• Zweitens, meine Sammlung von Links auf Redux-Leistungsoptimierungen: https://github.com/markerikson/react-redux-links/blob/master/react-performance.md#redux-performance. Insbesondere geht die Darstellung High Performance Redux auf dieses Thema ein.
• Schließlich habe ich an einem neuen Satz von Seiten für die Redux-Dokumente gearbeitet, die Möglichkeiten zur Strukturierung von Reduzierern behandeln. Der aktuelle Bestand befindet sich unter Structuring Reducers und enthält einen Abschnitt Normalizing State Shape sowie eine Reihe anderer verwandter Themen.