angular - NgRx 内存一个对象

Question

我们可以从 ngrx 存储中内存一个对象吗？我的意思是，我可以内存一个简单的原始值，但假设我想内存一个对象/数组。

**REDCUER**

export const initialState: AuthState = {
  isAutenticated: false,
  msg: ""
};

const reducer = createReducer(
  initialState,
  on(isAuths, (state: AuthState, action) =>({ ...state })),
  on(isAuthChanged, (state: AuthState, action) => {
    return {
      ...state,
      isAutenticated: action.isAutenticated
    }
  })

);


**SELECTORS**

export const selectAuth = (state: AppState) => state.auth
export const selectAuthState = createSelector(
    selectAuth,
    (state: AuthState) => state <------------ NO MEMORIZATION
);


export interface AuthState {
  isAutenticated: boolean;
  msg: string;
}

例如初始状态:{isAutenticated: false, msg: ""}

和:

  this.store.select(selectAuthState)
   .subscribe(r=>console.log(r))
       
setTimeout(()=>
        this.store.dispatch(isAuthChanged({ isAutenticated: false, msg: "" }))
    ,5000)

所以这将触发第一次初始值，然后在 5 秒后触发新事件，即使它的值相同 {isAutenticated: false, msg: ""}。我希望它只触发一次。

如果我会做这样的事情:

   export const selectAuthState = createSelector(
        selectAuth,
        (state: AuthState) => state.isAutenticated <------------ MEMORIZATION only on the state isAutenticated
    );

所以这将仅适用于 isAutenticated 状态，订阅函数将返回 true 或 false，但我想返回完整的对象。

我可以在 reducer 中检查相同的值并检查它们是否相等，然后返回相同的状态。

像这样:

  on(isAuthChanged, (state: AuthState, action) => {
    if (state.isAutenticated == action.isAutenticated && state.msg == action.msg) {
      return state;
    } else {
      return {
        ...state,
        isAutenticated: action.isAutenticated
      }
    }
  })

但我想知道是否有另一种方法可以实现这种使用选择器来内存整个对象的方法？

谢谢

Answer 1

Ngrx 的select 函数在幕后依赖于distinctUntilChanged。因此，这就是为什么返回一个简单的 bool 值(或任何原语)会起作用，但返回一个对象会触发选择器的原因。请记住，distinctUntilChanged 将根据引用相等性检查(即 object-a === object-b)进行过滤。

为了实现特定对象状态所需的内存行为，您必须关注缩减器。例如，在 isAuthChanged 的 reducer 函数中，您可以通过深度相等性检查来检查状态对象是否已更改:如果对象已更改，则返回新状态，否则返回相同状态。

例如:

 on(isAuthChanged, (state: AuthState, action) => {
    if (deepEqual(state, action)) {
       return state;
    } else {
       return {
        ...state,
        isAutenticated: action.isAutenticated
      }
    }
  })

...

function deepEqual(a, b) {
   return a.isAutenticated == a.isAutenticated && b.msg == b.msg
}

这与您已经发布的内容没有什么不同，所以这个答案只是确认您在正确的轨道上。

您可以利用 fast-deep-equal 对此进行一些优化.

例如:

  on(isAuthChanged, (state: AuthState, action) => {
    return equal(state, action) ? 
       state : 
       { ...state, isAutenticated: action.isAutenticated};
  })