Управление состоянием при отправке действия после действия в Ngrx без удаления предыдущего состояния

У меня очень серьезная проблема с архитектурой с использованием ngrx в моем приложении angular.

Итак, у меня есть модуль с несколькими хранилищами для этого, я использую forFeature в каждом модуле хранилища, и у меня есть один модуль корневого хранилища.

Мой модуль корневого хранилища выглядит как store.module.ts

export interface RootState {
     rootAuthState: RootAuthState,
     rootRefState: RootRefState,
     rootProductState:RootProductState
   }

 @NgModule({
        imports: [
            AuthModule,
            RefModule,
            ProductModule,
            StoreModule.forRoot([]),
            EffectsModule.forRoot([])
        ],
        exports: [
            StoreModule
        ]
    })

export class SharedStoreModule { }

Модуль моего дочернего магазина выглядит как product.module.ts

export interface Product {
    product: ProductState
}
export const reducers: ActionReducerMap<Product> = {
    product: prouctReducers.product
}

@NgModule({
    imports: [
        StoreModule.forFeature('proudct', reducers),
        EffectsModule.forFeature([ProductEffect]),
    ],
    providers: [
        ProductService
    ]
})
export class ProductModule {
}

Моя проблема, когда я отправляю действие после действия, например, когда мне нужен список продуктов, я использую это this.store.dispatch(new ListProductAction()); сейчас, когда я выбираю список, я получаю список продуктов с использованием кода выше

this.store.pipe(select(SelectListOfProduct)).subscribe(res => {
    console.log(res); // i get list [{"id": 1},{"id": 2}]
 });

Но когда я добавляю новое действие, например this.store.dispatch(new CountClickedAction()); другого магазина, мой список продуктов становится пустым, res в коде выше становится неопределенным.

this.store.pipe(select(SelectListOfProduct)).subscribe(res => {
        console.log(res); // undefinded
     });

Для каждого магазина я добавляю собственный пример редуктора product.reducer.ts

  export function prouctReducer(state = initProductState, action: ProductActions): ProductState {
    switch (action.type) {
        case GET_LIST_PRODUCT: {
            return {
                listProduct: null,
            }
        }
        case GET_LIST_PRODUCT_SUCCESS: {
            return {
                ...state,
                listProduct: action.payload
            };
        }
        case GET_LIST_PRODUCT_FAILURE: {
            return {
                ...state,
            };
        }
      }
  }

Пример редуктора аутентификации auth.reducer.ts

export function authReducer(state = initAuthState, action: AuthActions): AuthState {
        switch (action.type) {
            case GET_COUNT: {
                return {
                    count: null,
                }
            }
            case GET_COUNT_SUCCESS: {
                return {
                    ...state,
                    count: action.payload
                };
            }
            case GET_COUNT_FAILURE: {
                return {
                    ...state,
                };
            }
          }
      }

Цель, с которой я хочу получить такое состояние rootProductState: {listProduct:[{"id": 1},{"id": 2}]} rootAuthState: {count: 5}

Но актюэль получил rootProductState: {listProduct:[]} rootAuthState: {count: 5}

Как избежать удаления списка при отправке нового действия? любая идея и спасибо.


person A.khalifa    schedule 17.11.2020    source источник
comment
Может быть проблема с вашим редуктором. Почему бы не показать это?   -  person pixelbits    schedule 18.11.2020


Ответы (2)


Вы забыли сохранить исходное состояние:

        case GET_COUNT: {
            return {
                ...state,
                count: null,
            }
        }
person pixelbits    schedule 18.11.2020

OMG, моя проблема заключалась в том, что я не добавил редукторы по умолчанию

Приведенный выше код решает мою проблему, на которую я потратил много времени :(

default: {
  return state;
}

Итак, мой productReducer и все другие редукторы теперь по умолчанию

export function prouctReducer(state = initProductState, action: ProductActions): ProductState {
    switch (action.type) {
        case GET_LIST_PRODUCT: {
            return {
                listProduct: null,
            }
        }
        case GET_LIST_PRODUCT_SUCCESS: {
            return {
                ...state,
                listProduct: action.payload
            };
        }
        case GET_LIST_PRODUCT_FAILURE: {
            return {
                ...state,
            };
        }
      default: {
        return state;
         }
      }
  }
person A.khalifa    schedule 18.11.2020