Состояние магазина NgRx для вкладок - PullRequest
Новая
       17

Состояние магазина NgRx для вкладок

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

Я пытаюсь реализовать что-то похожее на вкладки браузера в моем приложении.В настоящее время я создаю новый ключ в магазине для каждой открытой вкладки и отдельно храню идентификатор текущей вкладки.В настоящее время состояние моего магазина примерно такое: 

{
  currentTab: 0,
  0: {
       url: 'http://google.com'
  }
  1: {
       url: 'http://twitter.com'
  }
}

Так как я довольно новичок в ngrx, я надеюсь, что вы можете сказать, является ли это правильным подходом для такого рода вещей.

Спасибомного!

1 Ответ

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

Вы должны хранить свои вкладки с @ngrx/entity.Состояние пользовательского интерфейса определенно принадлежит магазину, см. здесь .

Ваш редуктор может выглядеть как 

import { createEntityAdapter, EntityState } from '@ngrx/entity';

import { TabsActions, TabsActionTypes } from '../actions';
import { Tab } from '../../models/tab';

export const adapter = createEntityAdapter<Tab>({
  selectId: tab => tab.id,
  sortComparer: (tabA, tabB) => tabA.id === tabB.id ? 0 : tabA.id > tabB.id ? 1 : -1
});

export interface State extends EntityState<Tab> {
  currentTab: number
}
export const initialState = adapter.getInitialState({
  currentTab: 0
});

export function reducer(state = initialState, action: TabsActions) {
  switch (action.type) {
    case TabsActionTypes.Add:
      return adapter.add(action.payload, state);

    case TabsActionTypes.Close:
      return adapter.remove(action.payload, state);

    case TabsActionTypes.SwitchTab:
      return { ...state, currentTab: action.payload }

    default:
      return state;
  }
}

С действиями, определенными как 

import { Action } from '@ngrx/store';
import { Tab } from '../../models/tab';

export enum TabsActionTypes {
  Add = '[Tabs] Add',
  Close= '[Tabs] Close',
  SwitchTab = '[Tabs] Switch'
}

export class AddTab implements Action {
  readonly type = TabsActionTypes.Add;
  constructor(public payload: Tab) {}
}

// Define other actions (CloseTab, SwitchTab) in a similar way

export type TabsActions =
  AddTab |
  CloseTab |
  SwitchTab;
...