Partitionieren Sie einfach Ihren Hauptzustand in so viele Wizard-Zustände, wie Sie benötigen, und senden Sie eine Wizard-ID zusammen mit jeder Aktion, so dass Ihr Reduzierer weiß, welcher zu behandeln ist.
Als Array
{
wizards: [
{ id: 'A', state: true },
{ id: 'B', state: false },
{ id: 'C', state: true }
]
}
Sie können einen Assistenten Minderer schreiben, die versteht, wie einen einzigen Assistenten Zustand zu reduzieren.
function wizardReducer(wizard, action) {
switch(action) {
case 'TOGGLE':
return {
id: wizard.id,
state: !wizard.state
};
default:
return wizard;
}
}
Dann ein wizardsReducer schreiben, das versteht, wie eine Liste der Assistenten zu reduzieren.
function wizardsReducer(wizards, action) {
return wizards.map(function(wizard) {
if(action.id == wizard.id) {
return wizardReducer(wizard, action);
} else {
return wizard;
}
});
}
Schließlich verwenden combineReducers ein Root-Reduzierer, welche Delegierten Verantwortung für die wizards Eigenschaft dieser wizardsReducer zu erstellen.
combineReducers({
wizards: wizardsReducer
});
As Object
Wenn Sie Ihre Assistenten in einem Objekt, anstatt zu speichern, werden Sie Ihre wizardsReducer etwas anders konstruieren müssen.
Es würde nicht viel Sinn machen, über die Zustände zu mappen, wenn wir einfach den Zustand auswählen können, den wir sofort brauchen.
function wizardsReducer(wizards, action) {
if(!(action.id in wizards)) return wizards;
const wizard = wizards[action.id];
const updatedWizard = wizardReducer(wizard, action);
return {
...wizards,
[action.id]: updatedWizard
};
}
Sollte meine reagieren Komponenten, die die eindeutige ID zu generieren? Wo finde ich die ID? Im Zustand der Komponente? Soll ich Aktionen für CREATE/DESTROY ausführen, die beim Mounten/Unmounten der Komponente ausgelöst werden? –
Die meisten dieser Fragen hängen von der Lebensdauer und dem Zweck der einzelnen Assistenten in Ihrer Anwendung ab. Wenn es zwischen den Wizard-Zuständen und den Wizard-Komponenten wirklich eine 1: 1-Beziehung gibt, dann klingen alle diese Vorschläge vernünftig. –
Ich habe eine nette Redux-Bibliothek gefunden, die das etwas einfacher macht. Es gibt auch andere da draußen. https://github.com/tonyhb/redux-ui –