2017-02-28 5 views
-4
import { Blog } from './app.model'; 
import { ActionReducer, Action } from '@ngrx/store'; 
import * as _ from 'underscore'; 

export const LOAD_BLOGS = 'LOAD_BLOGS'; 
export const SAVE_COMMENT = 'SAVE_COMMENT'; 

export interface AppState { 
    blogs : Blog[] 
} 

export const initialState : AppState = { 
    blogs : [] 
}; 

var a; 

export const reducer = (state : AppState = initialState, action :Action) => { 
    switch (action.type) { 
     case LOAD_BLOGS: 
      return Object.assign({}, state, { 
       blogs : action.payload 
      }); 

     case SAVE_COMMENT: 
      const {title, comment} = action.payload; 
      return state.blogs.map(states =>{ 
        if(states.title === action.payload.title){ 
        console.log(states); 
        return Object.assign({}, states ,{ comment : [...states.comment , action.payload.comment]}); 
       } 
       return Object.assign({}, states); 
      }); 

     default: 
      return state; 
    } 
} 

STORE VOR SAVE_COMMENT ACTIONObject.assign() mit komplexem Objekt Angular2 NGRX/store

{blogs : [{id: 1, "title" : "one", "comment" : ["oneC", "twoC"]}, {id: 2, "title" : "two", "comment" : ["oneC", "TwoC"]}]} 

STORE NACH SAVE_COMMENT ACTION MIT KOMMENTAR "ThreeC" mit dem Titel bloggen "zwei"

outter Blogs Objekt, das Array von Objekten enthalten sollte, ist nicht da, stattdessen gibt es nur ein Array o f Objekt mit aktualisierten Blogs.

+0

Wenn Sie über 'Object.assign()' wissen, was haben Sie dann ausprobiert? – Jai

+10

Wenn es dringend ist, stellen Sie bitte die Frage so klar wie möglich, anstatt einen Text hinzuzufügen, der dringend ist. –

+0

Ich habe die Frage aktualisiert, bitte schau .. –

Antwort

0

Ich würde Ihnen empfehlen, einige einfache console.logs in Ihre Reducer-Funktion und die for-Schleife in Ihre Details-Funktion zu setzen, um zu sehen, was sie macht.

Ihr Problem ist, dass Sie eine Karte in Ihrer Reducer-Funktion haben, die über jedes Blog iteriert, und dann in Ihren Details funktionieren Sie wieder auf allen Blogs und sobald Sie eine Übereinstimmung finden, geben Sie die Übereinstimmung zurück.

Das bedeutet, dass Sie jeden Blogeintrag wiederholen und durch den Eintrag ersetzen, der dem Blogtitel entspricht (Sie werden return Object.assign({},state,c);).

Sie können auf viele Arten lösen, aber wenn Sie Ihre Code-Struktur mögen, könnten Sie nur den Status dieses Blogs in Details übergeben und die for-Schleife entfernen.

Verwandte Themen