web-dev-qa-db-ja.com

ngrx-アイテムのリストの単一のアイテムを更新する

次のようなアプリケーション状態ツリーがあります。

AppState
{
    MyPage1 - MyList - MyItem[]
    MyPage2 - MySubPage - MyList - MyItem[]
    MyPage3 - MyItem   //can be stand-alone as well
}

だから、私はページ上のアイテムのリストを持っています。 MyListレデューサーにアクションをディスパッチして、このリストをロードします。項目がロードされると、それらはMyListComponentへの入力として渡され、それに応じて対応する入力でMyItemComponentsを作成します。 MyItemComponentはスタンドアロンにすることもできます。したがって、常にMyListに依存しているわけではありません。

重要なのは、MyItemのそれぞれに独自のアクションがあることです（たとえば、いいね！そして、私は現在、その場合にどこでどのアクションをディスパッチするべきかについて行き詰まっています。更新されたアイテムと更新するリストを識別するにはどうすればよいですか。

ユーザーがリスト内のアイテムの1つを更新したときのアクションフローはどうなりますか？

また、MyItemの1つを直接変更した場合、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に別のアクションを起動し、アイテムは自身の状態を更新するために適切なアクションを起動します（@Effectを介して更新）。

正直に言うと、すべてかなり冗長で曖昧に見えます。それが実際にどのように実装されるかさえわかりません。経験のある人からの提案が本当に必要です。

pSすべてのデータがフェッチされ、REST api。

編集： 包括的な導入@ ngrx/store からのアプローチに従う場合、アプリには重複したアクションのトーンが含まれます（各コンテナー-MyList-MyItemからのすべてのアクションが繰り返されます）。私の場合により適したアプローチはありますか？

angularreduxactionstorengrx
12
Daniil Andreyevich Baunov

それを行う方法は、状態ツリーのサブパートを処理するサブレデューサーを用意することです。

配列内の単一の項目にアクションを送信する必要がある場合は、それらのすべてのアクションを、単一の項目を処理するサブレデューサーに渡します。

これは、コメントのあるニュースアイテムの例です。私はそれが少し物事を片付けることを望みます。

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({}, newsItem, {
        action: false,
        comments: [action.payload.comment, ...newsItem.comments]
      });

    case newsActions.Types.COMMENT_REMOVE_SUCCESS:
      return Object.assign({}, newsItem, {
        action: false,
        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({}, state, {
        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: string) {
    this.payload = {
      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: string) {
    this.payload = {
      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;
16
Leon Radley