angular - NgRx - 状态改变不当

Question

我有两个页面 FlowGroupPanel 和 FlowPanel。对于这些屏幕中的每一个，我都为过滤器创建了一个状态管理。但是，当我调度 FlowPanel 时，它会更改 FlowGroupPanel 资产。我不知道为什么会这样。我添加了代码的主要部分以及一些图片以便更好地理解。

FilterFlowGroupPanel 操作

import { createAction, props } from '@ngrx/store';
import { SearchFilterMessageLog } from '../models/SearchFilterMessageLog';

export enum FilterFlowGroupPanelActionTypes {
    ADDFILTER = '[Filter Flow Group Panel] Add Filter',
    CLEARFILTER = '[Filter Flow Group Panel] Clear Filter',
}

export const addFilter = createAction(
    FilterFlowGroupPanelActionTypes.ADDFILTER,
    props<{ searchFilterFlowGroupPanel: SearchFilterMessageLog }>()
)

export const clearFilter = createAction(
    FilterFlowGroupPanelActionTypes.CLEARFILTER,
    props<{ searchFilterFlowGroupPanel: null }>()
)

FilterFlowGroupPanel 缩减器

import { createReducer, props, on, State } from '@ngrx/store';
import { FilterFlowGroupPanelActions } from '../actions/action-types';
import { SearchFilterMessageLog } from '../models/SearchFilterMessageLog';

export interface FilterFlowGroupPanelState{
  filterFlowGroupPanel: SearchFilterMessageLog
}
// export const initialState = null;
const initialState: FilterFlowGroupPanelState = null



export const _filterFlowGroupPanelReducer = createReducer(initialState,
  on(FilterFlowGroupPanelActions.addFilter, (state, { searchFilterFlowGroupPanel }) => ({ ...state, ...searchFilterFlowGroupPanel})),
  on(FilterFlowGroupPanelActions.clearFilter, state => state )
)


export function filterFlowGroupPanelReducer(state, action) {
    return _filterFlowGroupPanelReducer(state, action);
  }

FlowGroupPanel 模块

StoreModule.forFeature('filterFlowGroupPanelFeature', {
      filterFlowGroupPanel: filterFlowGroupPanelReducer,
    })

调度

this.store.dispatch(FilterFlowGroupPanelActions.addFilter({searchFilterFlowGroupPanel}))

---

FilterFlowPanel 操作

import { createAction, props } from '@ngrx/store';
import { SearchFilterMessageLog } from '../models/SearchFilterMessageLog';

export enum FilterFlowPanelActionTypes {
    ADDFILTER = '[Filter Flow Panel] Add Filter',
    CLEARFILTER = '[Filter Flow Panel] Clear Filter',
}

export const addFilter = createAction(
    FilterFlowPanelActionTypes.ADDFILTER,
    props<{ searchFilterFlowPanel: SearchFilterMessageLog }>()
)

export const clearFilter = createAction(
    FilterFlowPanelActionTypes.CLEARFILTER,
    props<{ searchFilterFlowPanel: null }>()
)

FilterFlowPanel 减速器

import { createReducer, props, on, State } from '@ngrx/store';
import { FilterFlowPanelActions } from '../actions/action-types';
import { SearchFilterMessageLog } from '../models/SearchFilterMessageLog';

export interface FilterFlowPanelState{
  filterFlowPanel: SearchFilterMessageLog
}

export const initialState: FilterFlowPanelState = null

export const _filterFlowPanelReducer = createReducer(initialState,
    on(FilterFlowPanelActions.addFilter, (state,  {searchFilterFlowPanel} ) => ({ ...state, ...searchFilterFlowPanel})),
    on(FilterFlowPanelActions.clearFilter, state => state )
  )


export function filterFlowPanelReducer(state, action) {
    return _filterFlowPanelReducer(state, action);
  }

FlowPanel模块

StoreModule.forFeature('filterFlowPanelFeature', {
      filterFlowPanel: filterFlowPanelReducer,
    })

调度

this.store.dispatch(FilterFlowPanelActions.addFilter({searchFilterFlowPanel}))

标签： angularreduxngrx