ngRx 操作未正确分派

Question

I am trying to use ngRx to have a global storage for my app to access and change things whenever it needs to. The big problem is that I don't understand why my action that I dispatch is not changing anything in my app. I have used Redux devtools to see if the code is being fired but it's not, and any console.log commands I do also stop working. Do I need to use some other part to ngRx that I'm missing? Ty

Actions:

    export class changeTransactions implements Action {
  type = 'CHANGE_TRANSACTIONS';
  constructor(public payload: any[]) {
  }
}

export class addTransaction implements Action {
  type = 'ADD_TRANSACTION';
  constructor(public payload: any) {
  }
}

Reducer:

export function reducer(state: State = initialState, action: any) {
  switch(action.type) {
    case 'ADD_TRANSACTION': {
      state.transactions.unshift(action.payload);
      return state;
    }
    case 'LOAD_TRANSACTIONS': {
      return state.transactions;
    }
    default:
      return state;
  }
}

Normal Code used:

    this.observable$ = this.store.select('info');
        this.observable$.subscribe(info => {
          console.log(info);
          this.transactions = info.transactions;
          this.accounts = info.accounts;
        });
this.store.dispatch(new infoActions.addTransaction(fakeTransactions));

Answer 1

If you're action is not dispatched, (no trace in devtools redux), you should check if your store is correctly initialized.

Moreover, if setup is ok, it could be due to your reducer implementation.

Reducer function must mutate state and return a copied version but not the same instance reference.

Your code should be:

export function reducer(state: State = initialState, action: any) {
  switch(action.type) {
    case 'ADD_TRANSACTION': {
      // return a copied version of state, with mutation, never the same reference.
      return {
        ...state,
        transactions: [...state.transactions, action.payload]
      }
    }
    case 'LOAD_TRANSACTIONS': {
      // be careful to return state here, and not state.transactions !
      //return state.transactions;

      return state;
    }
    default:
      return state;
  }
}