Я создаю веб-приложение с использованием Angular 4 и @ngrx 4, и у меня возникла проблема с настройкой строго типизированных действий.
Я новичок в @ngrx, и я создал следующий класс для своих действий:
export const ActionTypes = {
LOAD_PRODUCT_TREE: 'load-product-tree',
LOAD_PRODUCT_TREE_COMPLETE: 'load-product-tree-complete'
};
// Load product tree by Id.
export class LoadProductTreeAction implements Action {
type = ActionTypes.LOAD_PRODUCT_TREE;
constructor (public payload: number) { }
}
export class LoadProductTreeCompleteAction implements Action {
type = ActionTypes.LOAD_PRODUCT_TREE_COMPLETE;
constructor (public payload: Map<number, Node>) { }
}
export type Actions = LoadProductTreeAction | LoadProductTreeCompleteAction;
Однако когда я пытаюсь использовать эти действия в своем редукторе:
export interface State {
productTree: Map<number, Node>;
}
const initialState: State = {
productTree: new Map<number, Node>()
};
export function productTreeReducer(state = initialState, action: productTreeOperations.Actions): State {
switch (action.type) {
case productTreeOperations.ActionTypes.LOAD_PRODUCT_TREE:
return state;
case productTreeOperations.ActionTypes.LOAD_PRODUCT_TREE_COMPLETE:
return { productTree: action.payload };
default:
return state;
}
}
Я получаю эту ошибку: Type '{ productTree: number | Map<number, Node>; }' is not assignable to type 'State'. Types of property 'productTree' are incompatible. Type 'number | Map<number, Node>' is not assignable to type 'Map<number, Node>'. Type 'number' is not assignable to type 'Map<number, Node>'.
в этой строке: return { productTree: action.payload };
Как я могу создать набор действий, которые принимают разные полезные данные / аргументы?
Также, что было бы наилучшей практикой для возвращаемого значения действия LOAD_PRODUCT_TREE
в редукторе? Должен ли я возвращать текущее состояние, пока информация загружается из серверной части, или я должен возвращать что-то еще?