Redux is een open-source JavaScript-bibliotheek die wordt gebruikt voor het beheren van de applicatiestatus. Het belangrijkste concept van Redux is dat de hele applicatiestatus in een enkele store wordt bewaard. Elke verandering in deze status wordt gemanipuleerd door een actie die door een reducer wordt verwerkt.
Met Redux kun je eenvoudig bepaalde actions ongedaan maken of opnieuw uitvoeren. Dit komt omdat elke mutatie van de toepassingsstatus een nieuw object oplevert in plaats van het originele te muteren.
Hier is een basisvoorbeeld van hoe “ongedaan maken” en “opnieuw uitvoeren” werkt in een Redux-toepassing.
Stel dat je een lijst met items hebt en je kunt items aan de lijst toevoegen of verwijderen. In een eenvoudige Redux-app zou je acties kunnen hebben zoals ADD_ITEM en REMOVE_ITEM die door de reducer worden verwerkt.
De eerste stap om undo/redo-functionaliteit toe te voegen, is om je reducer te wijzigen om een geschiedenis van staten bij te houden:
```
let initialState = {
past: [],
present: null,
future: []
}
function myReducer(state = initialState, action) {
switch (action.type) {
case ‘ADD_ITEM’:
return {
past: […state.past, state.present],
present: action.payload,
future: []
};
case ‘REMOVE_ITEM’:
return {
past: […state.past, state.present],
present: action.payload,
future: []
};
case ‘UNDO’:
const previous = state.past[state.past.length – 1];
const newPast = state.past.slice(0, state.past.length – 1);
return {
past: newPast,
present: previous,
future: [state.present, …state.future]
};
case ‘REDO’:
const next = state.future0;
const newFuture = state.future.slice(1);
return {
past: […state.past, state.present],
present: next,
future: newFuture
};
default:
return state;
}
}
```
Zoals je kunt zien, worden in elke actie de huidige status (‘present’) en de voorbije statussen (‘past’) opgeslagen. Voor de UNDO-actie pakken we de laatste status van de ‘past’-array en zetten we die als de huidige status. Voor de REDO-actie doen we hetzelfde met de ‘future’-array.
Onthoud dat Redux geen ingebouwde undo/redo-functionaliteit heeft. Dit is slechts een patroon dat u kunt gebruiken om deze functionaliteit te implementeren in uw Redux-toepassingen.
