我有一些以下的应用程序状态树：
AppState
{
MyPage1 - MyList - MyItem[]
MyPage2 - MySubPage - MyList - MyItem[]
MyPage3 - MyItem //can be stand-alone as well
}
所以,我有一个页面上的项目列表.我通过将操作分派给MyList reducer来加载此列表.加载项后,它们将作为输入传递给MyListComponent,从而创建具有相应输入的MyItemComponents.
MyItemComponent也可以是独立的.因此,它并不总是依赖于MyList.
问题是每个MyItem都有自己的动作(例如可以被喜欢或编辑).而且我现在已经陷入困境,在那种情况下我应该采取什么行动.如何识别哪个项目已更新以及应更新哪个列表.
当用户更新列表中的某个项目时,操作流程是什么？
而且 – 如果我直接更改其中一个MyItem,是否会检测到MyList的状态更改？
我可能会想到的情况是(在MyItem本身上有所有适当的操作)向MyList添加额外的操作 – 例如：
updateItem(payload:
{
updateType,//e.g. like,edit,delete
data,//data needed to make an update
itemId //index in the MyItem array
})
然后,我以某种方式从MyList向数组中指定的MyItem触发另一个动作,item触发相应的动作来更新自己的状态(通过@Effect更新)
如果更新成功,则会触发新操作以更新列表.
说实话,这一切看起来都非常冗长和含糊.甚至不确定它将如何在实践中实施.真的需要有经验的人的建议.
附：
我应该提到所有数据都是从REST api获取并发回的.
编辑：
如果遵循Comprehensive Introduction to @ngrx/store的方法,应用程序将有重复操作的音调(每个容器 – MyList – 将重复MyItem的所有操作).我的案子会有更合适的方法吗？
这样做的方法是使用一个子reducer来处理状态树的子部分.
如果您需要将操作发送到阵列中的单个项目,则将所有这些操作传递给处理单个项目的子缩减器.
这是一个有评论的新闻项目的例子.
我希望它可以清除一些东西.
import { Action } from '@ngrx/store';
import { AppState } from '../reducer';
import { NewsItem } from './news.model';
import * as newsActions from './news.actions';
export interface Newsstate {
readonly loading: boolean;
readonly entities: NewsItem[];
}
export interface AppStateWithNews extends AppState {
readonly news: Newsstate;
}
const initialState: Newsstate = {
loading: false,entities: [],};
const newsItemReducer = (newsItem: NewsItem,action: newsActions.NewsActionTypes): NewsItem => {
switch (action.type) {
case newsActions.Types.UPDATE:
case newsActions.Types.REMOVE:
case newsActions.Types.COMMENT_CREATE:
case newsActions.Types.COMMENT_REMOVE:
return Object.assign({},newsItem,{
action: true
});
case newsActions.Types.UPDATE_SUCCESS:
return Object.assign({},action.payload,{
action: false
});
case newsActions.Types.COMMENT_CREATE_SUCCESS:
return Object.assign({},{
action: false,comments: [action.payload.comment,...newsItem.comments]
});
case newsActions.Types.COMMENT_REMOVE_SUCCESS:
return Object.assign({},comments: newsItem.comments.filter(i => i.id !== action.payload.commentId)
});
default:
return newsItem;
}
};
export const newsReducer = (state: Newsstate = initialState,action: newsActions.NewsActionTypes): Newsstate => {
switch (action.type) {
case newsActions.Types.LIST:
return Object.assign({},state,{ loading: true });
case newsActions.Types.LIST_SUCCESS:
return {
loading: false,entities: action.payload
};
case newsActions.Types.CREATE_SUCCESS:
return Object.assign({
loading: false,entities: [action.payload,...state.entities]
});
case newsActions.Types.REMOVE_SUCCESS:
return Object.assign({
loading: false,entities: state.entities.filter(newsItem => newsItem !== action.payload)
});
// Delegate to newsItemReducer
case newsActions.Types.UPDATE:
case newsActions.Types.UPDATE_SUCCESS:
case newsActions.Types.COMMENT_CREATE:
case newsActions.Types.COMMENT_CREATE_SUCCESS:
case newsActions.Types.COMMENT_REMOVE:
case newsActions.Types.COMMENT_REMOVE_SUCCESS:
return Object.assign({},{
entities: state.entities.map(newsItem => {
// Only call sub reducer if the incoming actions id matches
if (newsItem.id === (action.payload.newsItem || action.payload).id) {
return newsItemReducer(newsItem,action);
}
return newsItem;
})
});
default:
return state;
}
};
并且看看如何在这里调用这些是news.actions.
import { Action } from '@ngrx/Store';
import { NewsItem } from './news.model';
import { Response } from '@angular/http';
export const Types = {
LIST: '[News] List',LIST_SUCCESS: '[News] List Success',LIST_ERROR: '[News] List ERROR',CREATE: '[News] Create',CREATE_SUCCESS: '[News] Create Success',CREATE_ERROR: '[News] Create Error',UPDATE: '[News] Update',UPDATE_SUCCESS: '[News] Update Success',UPDATE_ERROR: '[News] Update Error',REMOVE: '[News] Remove',REMOVE_SUCCESS: '[News] Remove Success',REMOVE_ERROR: '[News] Remove Error',COMMENT_CREATE: '[News] Comment Create',COMMENT_CREATE_SUCCESS: '[News] Comment Create Success',COMMENT_CREATE_ERROR: '[News] Comment Create Error',COMMENT_REMOVE: '[News] Comment Remove',COMMENT_REMOVE_SUCCESS: '[News] Comment Remove Success',COMMENT_REMOVE_ERROR: '[News] Comment Remove Error',};
/**
* List
*/
export class List implements Action {
type = Types.LIST;
constructor(public payload?: any) {}
}
export class ListSuccess implements Action {
type = Types.LIST_SUCCESS;
constructor(public payload: NewsItem[]) {}
}
export class ListError implements Action {
type = Types.LIST_ERROR;
constructor(public payload: Response) {}
}
/**
* Create
*/
export class Create implements Action {
type = Types.CREATE;
constructor(public payload: NewsItem) {}
}
export class CreateSuccess implements Action {
type = Types.CREATE_SUCCESS;
constructor(public payload: NewsItem) {}
}
export class CreateError implements Action {
type = Types.CREATE_ERROR;
constructor(public payload: Response) {}
}
/**
* Update
*/
export class Update implements Action {
type = Types.UPDATE;
constructor(public payload: NewsItem) {}
}
export class UpdateSuccess implements Action {
type = Types.UPDATE_SUCCESS;
constructor(public payload: NewsItem) {}
}
export class UpdateError implements Action {
type = Types.UPDATE_ERROR;
constructor(public payload: Response) {}
}
/**
* Remove
*/
export class Remove implements Action {
type = Types.REMOVE;
constructor(public payload: NewsItem) {}
}
export class RemoveSuccess implements Action {
type = Types.REMOVE_SUCCESS;
constructor(public payload: NewsItem) {}
}
export class RemoveError implements Action {
type = Types.REMOVE_ERROR;
constructor(public payload: Response) {}
}
/**
* Create Comment
*/
export class CommentCreate implements Action {
type = Types.COMMENT_CREATE;
payload: {
newsItem: NewsItem,comment: string
};
constructor(newsItem: NewsItem,comment: string) {
this.payload = {
newsItem,comment
};
}
}
export class CommentCreateSuccess implements Action {
type = Types.COMMENT_CREATE_SUCCESS;
payload: {
newsItem: NewsItem,comment: string
};
constructor(newsItem: NewsItem,comment
};
}
}
export class CommentCreateError implements Action {
type = Types.COMMENT_CREATE_ERROR;
constructor(public payload: Response) {}
}
/**
* Remove Comment
*/
export class CommentRemove implements Action {
type = Types.COMMENT_REMOVE;
payload: {
newsItem: NewsItem,commentId: string
};
constructor(newsItem: NewsItem,commentId: string) {
this.payload = {
newsItem,commentId
};
}
}
export class CommentRemoveSuccess implements Action {
type = Types.COMMENT_REMOVE_SUCCESS;
payload: {
newsItem: NewsItem,commentId: string
};
constructor(newsItem: NewsItem,commentId
};
}
}
export class CommentRemoveError implements Action {
type = Types.COMMENT_REMOVE_ERROR;
constructor(public payload: Response) {}
}
export type NewsActionTypes =
List
| ListSuccess
| ListError
| Create
| CreateSuccess
| CreateError
| Update
| UpdateSuccess
| UpdateError
| Remove
| RemoveSuccess
| RemoveError
| CommentCreate
| CommentCreateSuccess
| CommentCreateError
| CommentRemove
| CommentRemoveSuccess
| CommentRemoveError;