Question

我按照广告ngrx docs的说法一步一步地做了所有事情，但最后我得到了记忆功能。我通过github问题，但在我看来，我做的一切都是正确的，所以任何人都可以帮我弄清楚我做错了什么？

我的代码

app.index.ts

import {ActionReducer, createFeatureSelector, createSelector, MetaReducer} from '@ngrx/store';
import * as fromCategories from '../categories/store/categories.index';

export interface State {
  categoryState: fromCategories.State
}

export const reducers = {
  categoryState: fromCategories.categoryReducers
};

export const selectCategoriesFeature = createFeatureSelector<fromCategories.State>('categoryState');
export const selectCategoriesFeatureArray = createSelector(selectCategoriesFeature, (state: fromCategories.State) => state.categories);

categories.module.ts

@NgModule({
  imports: [
   ...
    StoreModule.forFeature('categoryState', categoryReducers),
    EffectsModule.forFeature([CategoriesEffects]),
  ],
...

categories.index.ts

import {Category} from '../categories';
import * as categoryReducer from './categories.reducer';

export interface State {
  categories: Category[]
}

export const categoryReducers = categoryReducer.reducer;

categroies.reducer.ts

import * as CategoriesActions from './categories.actions';
import {State} from './categories.index';

export type Action = CategoriesActions.All;

const initialState: State = {
  categories: null
};

export function reducer (state = initialState, action: Action): State {

  switch (action.type) {

    // GET CATEGORIES LIST

    case CategoriesActions.GET_CATEGORIES: {return state}
    case CategoriesActions.GET_CATEGORIES_ERROR: {return state}
    case CategoriesActions.GET_CATEGORIES_SUCCESS: {
      initialState.categories = action.payload;
      return Object.assign({}, initialState);
    }

    default: {
      return state;
    }
  }
}

categories.actions.ts

import { Action } from '@ngrx/store';
import {Category} from '../categories';

// *******************************************************************

// const

export const GET_CATEGORIES  = '[Category] Get items';
export const GET_CATEGORIES_ERROR = '[Category] Get items error';
export const GET_CATEGORIES_SUCCESS  = '[Category] Get items success';

// get categories

export class GetCategories implements Action {
  readonly type = GET_CATEGORIES;
  constructor(public payload?: any) {}
}

export class GetCategoriesError implements Action {
  readonly type = GET_CATEGORIES_ERROR;
  constructor(public payload: Response) {}
}

export class GetCategoriesSuccess implements Action {
  readonly type = GET_CATEGORIES_SUCCESS;
  constructor(public payload: Category[]) {}
}

export type All
  = GetCategories
  | GetCategoriesError
  | GetCategoriesSuccess

categories.component.ts

import * as fromRoot from '../store/app.index';
import {selectCategoriesFeatureArray} from '../store/app.index';

@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.css']
})

export class CategoriesComponent implements OnInit {

  categories$: any;

  constructor(private store: Store<fromRoot.State>) {  }

  ngOnInit() {
    console.log(selectCategoriesFeatureArray)
  }
}

这就是控制台日志返回的内容

ƒmemerized（）{ if（！lastArguments）{ lastResult = t.apply（null，arguments）; lastArguments = arguments; return lastResult; } for（var / ** @ typ ...

Ngrx特征选择器返回记忆功能

0 个答案: