Angular ngrx/store：选择器返回空值

Question

根据标题，当我在组件中使用选择器时，我得到了未定义的值。这是我的减速器

export interface State extends AppState.State {
transactions: TransactionState
 }
 export interface TransactionState {
  transactions: Transaction[]
  error: string
   }
   const initialState: TransactionState = {
    transactions: [],
    error: '',
      }

    export const transactionReducer = createReducer<TransactionState>(
     initialState,
     on(TransactionActions.loadTransactions, (state, action) => {
    return { ...state, transactions: action.transactions }
     }),
    on(
       TransactionActions.errorItem,
      (state, action): TransactionState => {
     return {
        ...state,
     error: action.message,
     }
    },
     )   ,
      )
    export const selectFeature = (state: State) => state.transactions
   export const selectTransactions = createSelector(
   selectFeature,
     (state: TransactionState) => state.transactions,
 )

这是我的行动

export const getTransactions = createAction('[Transaction] get transactions')

 export const loadTransactions = createAction(
  '[Transaction] load transactions',
 props<{ transactions: Transaction[] }>(),
  )

这里是我调用后端服务的效果

@Injectable()
export class TransactionEffects {
constructor(
  private actions$: Actions,
  private transactionService: TransactionService,
   ) {}

loadTransactions$ = createEffect(() =>
 this.actions$.pipe(
  ofType(getTransactions),
  mergeMap((action) => {
    console.log('inside effect')

    return this.transactionService.getTransactionsByUsername(3).pipe(
      map((data) => {
        console.log('data', data)
        return loadTransactions({ transactions: data })
      }),
      catchError((error) =>
        of({
          type: '[Transaction] error item',
          message: error,
        }),
      ),
    )
  }),
),

)

当我在组件中调度 getTransactions 操作并选择状态时，我得到了控制台日志 res undefined

 ngOnInit(): void {
this.userService.getBalance().subscribe((bal) => {
  this.currentBalance = bal
})
this.store.subscribe((state) => console.log('debug state store', { state }))
this.store.dispatch(TransactionActions.getTransactions())
this.store
  .select(selectTransactions)
  .subscribe((res) => console.log('res is', res))

另外，当我使用 redux 开发工具时，我在事务对象本身之前得到了一个 transactionReducer 对象

有人可以解释一下发生了什么，我错过了什么吗？谢谢

Answer 1

你的第一个选择器已经在抓取transactions

export const selectFeature = (state: State) => state.transactions;

export const selectTransactions = createSelector(
  selectFeature,
  (state: TransactionState) => state // this one already has transactions
                                     // no need of state.transactions
);

所以undefined 是预期的，因为transactions.transactions 不会退出