はじめに
NgRxはAngularの状態管理ライブラリです。普段では見えてないtypescriptの使い方があったので、解説しようと思います・
Reducer, Selector, Entity
定義したインターフェースに、値をオブジェクトリテラルのまま代入することができます
簡単な例
{
str : string;
num : number;
} = {
str: 'text',
num: 10,
bool: true // 余分なプロパティはエラーにならない
};
使用例
entityの特有のインターフェースをもったadpterのgetSelectorsメソッドによって、EntitiySelectorsを返します。
getSelectors(): EntitySelectors<T, EntityState<T>>;
export interface EntitySelectors<T, V> {
selectIds: (state: V) => string[] | number[];
selectEntities: (state: V) => Dictionary<T>;
selectAll: (state: V) => T[];
selectTotal: (state: V) => number;
}
特有のインターフェースを持った、 selectIds
, selectEntities
, selectAll
, selectTotal
を作ります。
export const {
selectIds,
selectEntities,
selectAll,
selectTotal,
} = adapter.getSelectors();
Selector
Selectorでは、ファクトリ関数(1つのオブジェクトを返す関数)を使います。
参考
https://www.webprofessional.jp/factory-functions-javascript/
簡単な例
creJelly()によって、オブジェクトを返しています。
function creJelly() {
return {
type: 'jelly',
colour: 'red'
scoops: 3
};
}
使用例
export const getProjects = createSelector(
getProjectState,
fromProject.selectAll
);