From e3770057a787b1f0966850428661bae184aec8b0 Mon Sep 17 00:00:00 2001 From: Jordan Date: Tue, 9 Jul 2019 11:32:17 -0400 Subject: [PATCH] docs: add destructuring actions with props example for createReducer Closes #1985 --- projects/ngrx.io/content/guide/store/reducers.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/projects/ngrx.io/content/guide/store/reducers.md b/projects/ngrx.io/content/guide/store/reducers.md index 3a40bd3028..85dc02663b 100644 --- a/projects/ngrx.io/content/guide/store/reducers.md +++ b/projects/ngrx.io/content/guide/store/reducers.md @@ -25,6 +25,7 @@ import { createAction } from '@ngrx/store'; export const homeScore = createAction('[Scoreboard Page] Home Score'); export const awayScore = createAction('[Scoreboard Page] Away Score'); export const resetScore = createAction('[Scoreboard Page] Score Reset'); +export const setScores = createAction('[Scoreboard Page] Set Scores'); @@ -72,7 +73,8 @@ const scoreboardReducer = createReducer( initialState, on(ScoreboardPageActions.homeScore, state => ({ ...state, home: state.home + 1 })), on(ScoreboardPageActions.awayScore, state => ({ ...state, away: state.away + 1 })), - on(ScoreboardPageActions.resetScore, state => ({ home: 0, away: 0 })) + on(ScoreboardPageActions.resetScore, state => ({ home: 0, away: 0 })), + on(ScoreboardPageActions.setScores, (state, { game }) => ({ home: game.home, away: game.away })) ); export function reducer(state: State | undefined, action: Action) { @@ -86,7 +88,8 @@ export function reducer(state: State | undefined, action: Action) { -In the example above, the reducer is handling 3 actions: `[Scoreboard Page] Home Score`, `[Scoreboard Page] Away Score`, and `[Scoreboard Page] Score Reset`. Each action is strongly-typed. Each action handles the state transition immutably. This means that the state transitions are not modifying the original state, but are returning a new state object using the spread operator. The spread syntax copies the properties from the current state into the object, creating a new reference. This ensures that a new state is produced with each change, preserving the purity of the change. This also promotes referential integrity, guaranteeing that the old reference was discarded when a state change occurred. +In the example above, the reducer is handling 4 actions: `[Scoreboard Page] Home Score`, `[Scoreboard Page] Away Score`, `[Scoreboard Page] Score Reset` and `[Scoreboard Page] Set Scores`. Each action is strongly-typed. Each action handles the state transition immutably. This means that the state transitions are not modifying the original state, but are returning a new state object using the spread operator. The spread syntax copies the properties from the current state into the object, creating a new reference. This ensures that a new state is produced with each change, preserving the purity of the change. This also promotes referential integrity, guaranteeing that the old reference was discarded when a state change occurred. +