难以理解如何使用Angular6,@ NGRX和Normalizr对我的状态进行非规范化

时间:2018-09-25 15:55:14

标签: angular normalization ngrx normalizr

我正在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"
      }
    }
  ]
};

我可以正常化工作,就像检查商店时一样,状态对象如下所示:

    {
  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文档,但似乎无法理解需要做什么。 谁能看到我在哪里出问题了,或者如何在选择器中实现非规范化功能以将非规范化数据返回给组件? 谢谢

0 个答案:

没有答案