传递给 `selectId` 实现的实体返回未定义

The entity passed to the `selectId` implementation returned undefined

我想在 ngrx 中设置令牌和刷新令牌,并为每个请求保存和使用它,当页面重新加载时不要删除 redux 中的数据。

我为此实现了这个状态:

我发送数据:

            this.getUserInformation().toPromise().then(responset => {
            if (response.success === true) {
                this.store.dispatch(new SetUserInformation({
                    displayName: responset['result']['displayName'],
                    userInfo: responset.result.claims,
                    RefreshTokenStatus:false,
                    accessToken:response['result']['access_token'],
                    refreshToken:response['result']['refresh_token']
                }))
            }
        });

在我定义商店的模块中:

    StoreModule.forFeature('Information', reducer),
    EffectsModule.forFeature([])

这是我的减速器:

   const initialState = adapter.getInitialState({
    accessToken: null,
    refreshToken: null,
    RefreshTokenStatus: false,
    userInfo: null,
    displayName: null
})

export function reducer(state = initialState, action: TokenAction): TokenState {

    switch (action.type) {
        case TokenActionTypes.UserInformation:
            return adapter.addOne(action.payload, state)
        default:
            return state;
    }
}

这是我的模型:

  export interface TokenState {
    accessToken: string;
    refreshToken: string;
    RefreshTokenStatus: boolean;
    userInfo: string[];
    displayName: string;
}

这是我的 Selector:

export interface State extends fromState.State, EntityState<TokenState> {
    UserInfo: TokenState;
}

export const adapter: EntityAdapter<TokenState> = createEntityAdapter<TokenState>();
const getTokenFetureState = createFeatureSelector<TokenState>('Information');


export const getAccessToken=createSelector(
    getTokenFetureState,
    state => state.accessToken
)

这是行动:

   export class SetUserInformation implements Action {
    readonly type = TokenActionTypes.UserInformation;

    constructor(public payload: TokenState) {
    }
}

export type TokenAction = SetUserInformation

现在我有两个问题:

 this.store.pipe(select(fromTokenSelect.getAccessToken)).subscribe(data=>{
     console.log(data)
 })

答:当我想获取使用它的令牌时 return null 并向我显示此错误:

@ngrx/entity: The entity passed to the selectId implementation returned undefined. You should probably provide your own selectId implementation. The entity that was passed: Object The selectId implementation: (instance) => instance.id

B: 重新加载页面时,它会从 ngrx 中删除数据。

我该如何解决这个问题?

您正在使用 ngrx/entity 获取 non-entity 数据。实体旨在处理数据数组,其中每个元素都有某种唯一标识符。这就是它抛出错误的原因:您正在向它提供 non-entity 兼容的数据。您需要编写一个简单的 reducer 来简单地设置状态,而不是尝试将数据添加到 non-existent 实体。

至于页面重新加载,NgRx 将始终重置数据,这是预期的行为。如果你想随着时间的推移持久保存数据,你需要实现 localStorage 保存。