Wie kann man den Redux-Zustand richtig verwalten?

Question

Ich bin für die beste Praxis Ansatz suchen redux Zustand insbesondere Fall verwalten:

ich eine Anwendung für die Bearbeitung Beiträge mit Content-Editor haben, sieht Anwendungszustand wie folgt aus:

{ 
    posts: [ 
    { 
     id: 123, 
     blocks: [ 
     { 
      setting1: 'fuzz', 
      setting2: 'bar', 
      ... 
     } 
     ], 
     ... 
    }, 
    ... 
    ], 

    activeBlock: { 
    setting1: 'fuzz', 
    setting2: 'bar', 
    ... 
    } 
} 

Es ist eigentlich ein Staatsstruktur, zu der ich kommen möchte.

Zu dieser Zeit habe ich die folgende Struktur haben:

{ 
    posts: [ 
    { 
     id: 123, 
     activeBlockIndex: 0, 
     blocks: [ 
     { 
      setting1: 'fuzz', 
      setting2: 'bar', 
      ... 
     } 
     ], 
     ... 
    }, 
    ... 
    ] 
} 

Und ich habe eine gemeinsame Minderer für Beiträge und Inhaltsblöcke. Und es ist wichtig zu erwähnen, dass Content Editor Komponente sehr komplex ist und so viele tief in Kind Komponenten geht. Es scheint in Ordnung zu sein und es funktioniert .. Aber Ich habe ein Problem: Ich muss so viele Informationen über Beiträge, in den Content Editor 's Komponenten angeben, z. B .: PostId, BlockIndex. Ich denke, es ist nicht so gut, denn Hauptverantwortung der Content Editor Komponente ist es nur - Bearbeitung des Inhalts, egal wo es gespeichert ist.

Ich möchte meine App so refaktorieren Content Editor 's Komponenten enthalten nur für die state.activeBlock und andere Komponenten zur Verwaltung von Posts und Blöcke nur für state.posts Referenz enthalten. (erste Variante der Struktur in der Frage)

Mit anderen Worten bin ich auf der Suche nach einer Möglichkeit für die Synchronisierung state.activeBlock Zweig des Staates state.posts auf der Ebene der Reducer (oder woanders, ich weiß es nicht).

Ich schätze wirklich jede Ratschläge.

Btw, ist es klar, wovon ich spreche? Oder die Frage sollte detaillierter umgeschrieben werden?

Answer 1

Ich bin mir nicht sicher, ob ich genau verstehe, was Sie fragen, aber wenn Sie mehrere "Bereiche" des Staates für Ihr Beispiel möchten, können Sie combineReducers verwenden. ZB store.js

import thunkMiddleware from 'redux-thunk' 
import { createStore, combineReducers, applyMiddleware } from 'redux' 

import postsReducer from './reducers/postsReducer' 
import activeBlockReducer from './reducers/activeBlockReducer' 

const reducers = { 
    posts: postsReducer, 
    activeBlock: activeBlockReducer 
} 

const reducer = combineReducers(reducers) 
const store = createStore(
    reducer, 
    applyMiddleware(
     thunkMiddleware 
    ) 
) 

export default store 

In mapStateToProps können Sie state.posts[0] und state.activeBlock.setting1 verwenden, um Ihre Komponenten zu verbinden.