Проблемы с пониманием того, как денормализовать мое состояние, используя Angular6, @NGRX и Normalizr - PullRequest
Новая
       46

Проблемы с пониманием того, как денормализовать мое состояние, используя Angular6, @NGRX и Normalizr

0 голосов
/ 25 сентября 2018

Я создаю небольшое приложение на Angular6, которое использует @NGRX для управления состоянием и Nomalizr для де / нормализации данных.Нормализация происходит в результате, и моя денормализация должна произойти в селекторе.

У меня возникла проблема с пониманием того, что делать при попытке денормализовать мое состояние в селекторе, и у меня возникли проблемы с его работой.

Вот мой код:

Мои действия: 

import {Action} from "@ngrx/store";

export const GET_ARTICLE = 'Get_Article';
export const GET_ARTICLE_LOAD_SUCCESS = 'Get_Article_Load_Success';

export class GetArticleAction implements Action {
  readonly type = GET_ARTICLE;

  constructor(public payload: string) {}
}

export class GetArticleLoadSuccess implements Action {
  readonly type = GET_ARTICLE_LOAD_SUCCESS;

  constructor(public payload) {}
}

export type All = GetArticleAction | GetArticleLoadSuccess;

Код моего компонента, который запускает действие, а также подписка на наблюдаемое, которое будет следить за изменениями состояния:

 ngOnInit() {
    this.store.pipe(
        select(getArticles)
    ).subscribe((response) => {
        console.log(response);
    })
  }

  getArticle(id: string) {
    this.store.dispatch(new GetArticleAction(id));
  }
}

Мой эффект: 

 @Effect()
  public getArticle$: Observable<Action> = this.actions$.pipe(
      ofType(GET_ARTICLE),
      switchMap((action: GetArticleAction) => {
        // we don't user the action payload here as we are mocking the API call
        return of(mockData)
      }),
      switchMap((response: IArticle) => {
        const normalizedData = normalize(response, article);
        return of(normalizedData);
      }),
      flatMap((normalizedData) => [
        new GetArticleLoadSuccess(normalizedData)
      ])
  )

И мой редуктор: 

const initialState: ArticleState = {
  articles: [],
  comments: [],
  users: []
};

export function reducer(state = initialState, action: fromActions.All): ArticleState {
  switch (action.type) {
    case fromActions.GET_ARTICLE: {
      return Object.assign({}, state);
    }
    case fromActions.GET_ARTICLE_LOAD_SUCCESS: {
      return Object.assign({}, action.payload);
    }
    default: {
      return state;
    }
  }
}

export const getArticleState = createFeatureSelector<ArticleState>('articleState');
export const getArticles = createSelector(getArticleState, (state: ArticleState) => {
  return denormalize([], article, state.entities);
});

Мои данные таковы: 

import {IArticle} from "./article";

export const mockData: IArticle = {
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [
    {
      "id": "324",
      "commenter": {
        "id": "2",
        "name": "Nicole"
      }
    }
  ]
};

Iможно заставить работать нормализацию, так как когда я проверяю свое хранилище, объект состояния выглядит следующим образом: 

    {
  articleState: {
    entities: {
      users: {
        '1': {
          id: '1',
          name: 'Paul'
        },
        '2': {
          id: '2',
          name: 'Nicole'
        }
      },
      comments: {
        '324': {
          id: '324',
          commenter: '2'
        }
      },
      articles: {
        '123': {
          id: '123',
          author: '1',
          title: 'My awesome blog post',
          comments: [
            '324'
          ]
        }
      }
    },
    result: '123'
  }
}

Как вы можете видеть, я создал селектор, который будет возвращать денормализованное состояние, но я в растерянности из-за того, чточто мне нужно предоставить для этой функции.Я проверил документы Normalizr, и я не могу понять, что нужно сделать.Может кто-нибудь увидеть, может быть, где я иду не так, или как я реализую функцию денормализации в селекторе, чтобы вернуть денормализованные данные обратно в компонент?Спасибо

...