À quoi servent les services si vous utilisez ngrx/store et les effets?

Question

J'essaie d'ajouter ngrx à mon projet angulaire. mais je ne peux pas dire si j'ai encore besoin de services. puisque le composant peut répartir les actions. est-ce que cela signifie que je n'ai pas besoin d'utiliser un autre service que ngrx/store?

Answer 1

-je encore utiliser les services pour encapsuler la logique. Généralement, les composants parlent aux services et les services parlent au magasin.

J'ai trouvé la portée de ce service ne va au-delà de stockage, afin de les enlever mettraient trop de responsabilités/la logique métier dans les composants du magasin.

Mon magasin se concentre sur de simples actions comme api, qui sont courts et faciles à tester, par exemple

static INITIALIZE_CONFIG_REQUEST = 'INITIALIZE_CONFIG_REQUEST'; 
    static INITIALIZE_CONFIG_SUCCESS = 'INITIALIZE_CONFIG_SUCCESS'; 
    static INITIALIZE_CONFIG_FAILED = 'INITIALIZE_CONFIG_FAILED'; 
    static INITIALIZE_CONFIG_TEMPLATE_ERROR = 'INITIALIZE_CONFIG_TEMPLATE_ERROR'; 

    createInitializeConfigRequest() { // separate from invoking call for easier testing 
    return { 
     type: ConfigActions.INITIALIZE_CONFIG_REQUEST, 
     httpRequest: { 
     url: 'api/path/to/config', 
     successAction: this.createInitializeConfigSuccess, 
     failedAction: this.createInitializeConfigFailed, 
     validateResponse: (data) => this.checkTemplate(data) 
     } 
    }; 
    } 
    initializeConfigRequest() { // called by config.service 
    this.store.dispatch(this.createInitializeConfigRequest()); 
    } 

    createInitializeConfigSuccess(data) { 
    const payload = data; 
    return { 
     type: ConfigActions.INITIALIZE_CONFIG_SUCCESS, 
     payload 
    }; 
    } 

    createInitializeConfigFailed(error) { 
    return { 
     type: ConfigActions.INITIALIZE_CONFIG_FAILED, 
     payload: { 
     error 
     } 
    }; 
    } 

Avec ce modèle, je peux ajouter plus facilement middleware tels que que la manipulation httpRequest et la validation des réponses ci-dessus .

La plupart des réductions sont effectuées par un seul réducteur générique qui fait l'hypothèse que les propriétés de charge utile correspondent exactement aux propriétés du magasin. C'est ma convention préférée, parce que maintenant j'ai un ensemble de tests complets pour le réducteur générique au lieu de n tests répétitifs pour n réducteurs.

genericActionHandler(state, action) { 
    if (!action.payload) { 
     return state; 
    } 
    const newState = {...state}; 
    Object.assign(newState, action.payload); 
    return newState; 
    } 

J'espère que cela vous donnera une idée de mon architecture.