Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

44
Vistas
Grouping the state with NgRx is not working

I am trying to group the state.

Index.ts

export const reducers: ActionReducerMap<ApplicationState> = {
  admin: adminReducer
};

export const metaReducers: MetaReducer<ApplicationState>[] = [];

Admin Reducer

export const adminReducer: any = {
    productCategory: ProductCategoryReducer,
    productVendor: ProductVendorReducer,
    productSubCategory: ProductSubCategoryReducer,
    products: ProductsReducer,
    product: ProductReducer,
    productDiscount: ProductDiscountReducer
};

When I run the application, on redux tool,I am not able to see the state. It is blank

export interface ApplicationState {
    admin: AdminState
}

export interface AdminState {
    productCategory: ProductCategoryState;
    productVendor: VendorState;
    productSubCategory: ProductSubCategoryState;
    products: ProductsState;
    product: ProductState;
    productDiscount: ProductDiscountState
}

enter image description here

Register

    imports: [
        
        StoreModule.forRoot(reducers, { metaReducers }),
        EffectsModule.forRoot([]),
StoreDevtoolsModule.instrument({
      maxAge: 25
    })
        
      ]
7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The Reducer is a "function that takes an Action and a State, and returns a State", not an object, so you can't group the reducers to each other just by creating one object containing them.

Thanks for NgRx combineReducers function, which provides a way to combine multiple states, and returns the combined reducer as a function (with state & action args) that handles the sub-states changes and returns the combined state.

So you can simply combine the reducers using combineReducers like the following:

export const adminReducer = combineReducers({
    productCategory: ProductCategoryReducer,
    productVendor: ProductVendorReducer,
    productSubCategory: ProductSubCategoryReducer,
    products: ProductsReducer,
    product: ProductReducer,
    productDiscount: ProductDiscountReducer,
});
7 months ago · Juan Pablo Isaza Denunciar

0

Using the combineReducers I achieved that

export const adminReducer = combineReducers({
    productCategory: ProductCategoryReducer,
    productVendor: ProductVendorReducer,
    productSubCategory: ProductSubCategoryReducer,
    products: ProductsReducer,
    product: ProductReducer,
    productDiscount: ProductDiscountReducer
});
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.