obtenir seul élément de ngrx/magasin

Ce que vous n'obtenez pas, c'est que pour chaque action, qui est appelé à un réducteur, le nouvel état est retourné.

À partir de votre code d'exemple dans la question, votre état est juste une liste d'instruments.

Il n'y a pas d'index, de sorte que la seule façon de vérifier si l'instrument est dans la liste est à la recherche de l'ensemble de la liste.

Mais que faire si votre état est un dictionnaire? En outre, si vous avez gardé une liste des index séparé pour le dictionnaire?

votre état est de type ce:

export interface OfferState {
  ids: string[];
  entities: { [id: string]: IOffer };
};

Chaque fois qu'une action est exécutée, le nouvel état est retourné. C'est un concept important dans Redux, parce que l'état ne peut jamais être muté directement. Vous êtes en fait le mieux l'application stricte de cette lorsque vous composez votre réducteur: (dire que vous avez vous "offre réducteur" et un autre réducteur, à vous de les combiner pour composer:

> export default compose(storeFreeze, combineReducers) ({   oether:
> otherReducer,   offers: offersReducer });

Il est facile de faire les choses mal dans Redux - mais à l'aide de storeFreeze va lancer un message d'erreur si vous essayez à la mutation de l'état directement. Le point est que les actions de changement d'état, et de faire un nouvel état. Ils ne changent pas l'état existant - il nous permet de undo/redo... etc.

À l'aide de votre exemple ci-dessus, je voudrais utiliser ce que mon Offre est réducteur:

export interface OfferState {
  ids: string[];
  entities: { [id: string]: IOffer };
};

export default function(state = initialState, action: Action): OfferState {
    switch(action.type){
        case OfferActions.INSERT:
        const offer : IOffer = action.payload;
        return {
            ids: [ ...state.ids, action.payload.Instrument ],
            entities: Object.assign({}, state.entities, { [action.payload.Instrument]: action.payload})
        };
        case OfferActions.UPDATE:
            return {
                ids: [...state.ids],
                entities: Object.assign({}, state.entities,  { [action.payload.Instrument]: action.payload})
            }

        default:
            return state;
    }
}

noter que des modifications sont apportées à un état temporaire par l'objet.attribuer (deep copy) et puis le nouvel état est retourné.

L'autre réponse à la question était un peu confus. Il est allé dans le détail de la façon de combiner les différents réducteurs, mais il n'a pas beaucoup de sens pour moi.

dans votre réducteurs/index.ts, vous devriez avoir un type:

export interface AppState {
  otherReducer: OtherReducer;
  offers: fromOffersReducer.OfferState;
}

à l'intérieur de cet indice.ts, vous devriez avoir les fonctions qui obtiennent les réducteurs:

export function getOfferState() {
  return (state$: Observable<AppState>) => state$
    .select(s => s.offers);
}

export function getOtherReducer() {
  return (state$ : Observable<AppState>) => state$
    .select(s => s.otherReducer)
}

à l'intérieur de notre offerReducer et notre otherReducer, nous définissons les fonctions qui permet d'interroger les données dont nous avons besoin. Ce sont des fonctions anonymes, qui ne sont liés à rien à l'heure actuelle, mais nous lien plus tard (à la getReducerFunctions).

des exemples de ces fonctions:

export function getOfferEntities() {
  return (state$: Observable<OfferState>) => state$
    .select(s => s.entities);
};

export function getOffer(id: string) {
  return (state$: Observable<OfferState>) => state$
    .select(s => s.entities[id]);
}

cela ne fait rien. à moins que nous l'appliquer à certaines données utiles (par exemple, la offersRedeucer) que nous avons fait plus tôt, et nous combinons les deux comme ceci:

import offersReducer, * as fromOffersReducer from './OffersReducer';

 export function getOfferEntities() {
   return compose(fromOffersReducer.getOfferEntities(), getOfferState());
 }

  export function getOffer(instrument:string) {
   return compose(fromOffersReducer.getOffer(instrument), getOfferState());
 }

J'ai essayé d'anticiper le prochain problème que vous ferez face (un deuxième réducteur) ainsi que de répondre à la question "comment obtenez-vous une question?", comme je sais, vous allez tomber sur cette question à beaucoup. Mais ne vous laissez pas vous confondre avec l'original de votre requête.... L'astuce pour trouver un élément, est pour le maintien d'un état qui est une carte d'articles (un dictionnaire) - jamais de la mutation de l'etat et de toujours revenir à un état nouveau. Suivre cette orientation et votre problème est résolu. Le prochain problème que vous ferez face à de multiples réducteurs, mais lire de nouveau au-dessus et il doit faire sens.

Je suis en désaccord avec la réponse précédente sur stackoverflow questions - ils sont tout ce que vous besoin pour être. Et si vous avez besoin d'un tutoriel, alors ils peuvent être un tutoriel. Et je ne pense pas que ce soit une mauvaise chose, surtout dans le créneau des sujets comme la RXJS où peu de conseils et de la documentation est disponible.

Merci de mettre un bounty sur cette question - j'espère que je vous ai donné une meilleure réponse. D'autres questions - juste à crier. Je suis heureux de vous aider. Vous ne serez pas obtenir un "je suis réticent à répondre à toutes vos questions" de moi... je suis là pour vous aider - ne pas insulter.

OriginalL'auteur reach4thelasers