Fast identische Reduzierungen für verschiedene APIs

Question

Ich benutze ngrx als Status-Container für eine Angular2-App. Im Moment habe ich drei API-Aufrufe, die eine Liste von Anzeigen, eine Liste von Abteilungen und Details für eine einzelne Abteilung abrufen. Sie können diese Informationen nur abrufen. Sie können es nie in der App aktualisieren oder anderweitig manipulieren. Meine Anwendung Zustand wie folgt aussieht:

{ 
    ads: Ad[], 
    departments: Department[], 
    selectedDepartment: Department, 
} 

Dies funktioniert gut, und ich kann mit this.store.select('ads') Scheiben davon in meinen Komponenten erhalten, etc. Alles funktioniert gut.

Ein Problem, das ich renne ist, dass ich sehr ähnlich aussehe und einfache Boilerplate ... besonders für die Reducer. Beispiel:

export const departmentsReducer = (state = [], { type, payload }) => { 
    switch (type) { 
    case LOAD_DEPARTMENTS: 
     return state; 

    case LOAD_DEPARTMENTS_COMPLETE: 
     return payload; 

    default: 
     return state; 
    } 
}; 

Ich habe LOAD_x die ngrx/effects Läden von Daten aus der API durch meinen Dienst auszulösen verwendet. Dann LOAD_x_COMPLETE, die die von der API zurückgegebenen Daten übernimmt und den Statuscontainer aktualisiert.

Gibt es eine Möglichkeit, die Menge an Vorläufern zu reduzieren, wenn diese Reduzierstücke erstellt werden, da sie alle mehr oder weniger auf die gleiche Weise funktionieren? Der einzige wirkliche Unterschied ist die API, die sie verwenden.

Answer 1

Hier ist eine Empfehlung von der offiziellen redux docs: http://redux.js.org/docs/recipes/ReducingBoilerplate.html#generating-reducers

Sie empfehlen, wie so eine createReducer Funktion machen:

function createReducer(initialState, handlers) { 
    return function reducer(state = initialState, action) { 
    if (handlers.hasOwnProperty(action.type)) { 
     return handlers[action.type](state, action) 
    } else { 
     return state 
    } 
    } 
} 

Dann können Sie die Druckminderer erstellen:

export const todos = createReducer([], { 
    [ActionTypes.ADD_TODO](state, action) { 
    let text = action.text.trim() 
    return [...state, text] 
    } 
})