Question

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;
    }
}

在SAVE_COMMENT行动之前存储

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

在SAVE_COMMENT行动之后存储评论“ThreeC”到博客标题为“两个”

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

应该包含对象数组的

outter blogs对象不存在，而是只有一个带有更新博客的对象数组。

Answer 1

我建议你在reducer函数中添加一些简单的console.logs，在你的详细信息函数中添加for循环，看看它在做什么。

你的问题是你的reducer函数中有一个迭代遍历每个博客的地图，然后在你的详细信息功能中，你再次循环所有博客，一旦找到匹配就返回匹配。

这意味着您循环播放每篇博文，并将其替换为与博客标题匹配的帖子（您将点击return Object.assign({},state,c);）。

您可以通过多种方式解决问题，但如果您喜欢自己的代码结构，则可以将该博客的状态转换为详细信息并删除for循环。

具有复杂对象Angular2 ngrx / store的Object.assign（）

1 个答案: