angular – ngrx – 更新项目列表中的单个项目

发布时间：2020-12-17 08:32:50 所属栏目：安全来源：网络整理

导读：我有一些以下的应用程序状态树： AppState{ MyPage1 - MyList - MyItem[] MyPage2 - MySubPage - MyList - MyItem[] MyPage3 - MyItem //can be stand-alone as well} 所以,我有一个页面上的项目列表.我通过将操作分派给MyList reducer来加载此列表.加载项后

我有一些以下的应用程序状态树：

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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!