Reducers

(previousState, action) => newState

Reducer === Pure Function:

• No side effects (Call non-pure functions:. Date.now() or Math.random())
• No Asynchronous operation (e.g. API calls)
• No mutations

=> Just calculations

Functionnal Decomposition

Different pure functions coexist inside reducer:

• Small utility functions: Containing some reusable chunk of logic that is needed in multiple places
• Functions handle a specific update case: Need parameters other than the typical (state, action) pair
• Functions handle all updates for a given slice of state: own the typical (state, action) parameter signature => reducer composition concept

Reducer Example

        // NgRx example
        export const initialState: State = {
            entities: [],
            pending: false,
            error: null
        }

        export const todoReducer: ActionReducer< State > = (state = initialState, action: todo.TodoActions): State => {
            switch (action.type) {

              case todo.ActionTypes.GET_TODO:
              case todo.ActionTypes.UPDATE_TODO:
              case todo.ActionTypes.REMOVE_TODO:
              case todo.ActionTypes.ADD_TODO: {
                return Object.assign({}, state, { pending: true, error: null })
              }

              case todo.ActionTypes.ADD_TODO_SUCCESS: {
                const newTodo: Todo = < Todo >action.payload;
                return Object.assign({}, state, { entities: [...state.entities, newTodo], pending: false, error: null })
              }

              default: {
                return state
              }
            }
        }
    

Combine Reducer

        import { StoreModule, MetaReducer } from '@ngrx/store';

        # app.module.ts
        StoreModule.forRoot({}, {metaReducers})

        # todo.module.ts => feature module
        StoreModule.forFeature('todo', reducers, {metaReducers}),
    

            function combineReducers(reducers) {
                return function (state = {}, action) {
                    return Object.keys(reducers).reduce((nextState, key) => {
                    // Call every reducer with the part of the state it manages
                    nextState[key] = reducers[key](state[key], action)
                    return nextState
                    }, {})
                }
            }
        

Meta-Reducer || Higher Order Reducer

It's a function that takes a reducer, and returns a new reducer that is able to handle new actions, or to hold more state, delegating control to the inner reducer for the actions it doesn't understand.

Reducer semantic

Different type of reducer designation:

• reducer: Any pure functions with the following signature: (state, action) => newState
• root reducer: The reducer function passed as the first argument to createStore
• slice reducer: A reducer function that is being used to handle updates to one specific slice of the state tree
• case function: A function that is being used to handle the update logic for a specific action
• higher-order reducer/mete-reducer: A function that takes a reducer function as an argument, and/or returns a new reducer function as a result