How to properly push and receive data from ngrx store

1
votes

I'm trying to works with ngrx store and faced with problem, to properly push data in my store and select it.

My store object look like

AppStore = {
  chat: {
    messages: []
  }
}

and my reducers looks like

const initialState = {
  messages: []
};

export const ChatReduce = (state = initialState, action:Action) => {
  if (typeof state === 'undefined') {
    return initialState;
  }
  switch(action.type){
    case 'ADD_MESSAGE':
      return {
        ...state,
        messages: [...state.messages, action.payload]
      };
    default:
      return state;
  }
};

in case "ADD_MESSSAGE" I want to push new message object from action payload and return new state. what am I doing wrong? Right now my state's chat message array just rewrites one value every time I push new message, but old messages are not saves.

And after write to store, how to select messages of me state? Is it necessary to subscribe to data? I tried this.store.select('chat') but how to get messages?

2
angularngrxngrx-store

2 Answers

1
votes

Heres how i approached it,

  ngOnInit() {
  this.getStudents();
  this.students$ = this.store.select(state => state.students)
  this.students$.forEach( v => console.log(v))
  }

  getStudents(){
  // we want to dispatch na action 
  this.store.dispatch(new studentActions.LoadStudentsAction())
}
0
votes

I was able to get it to add without overriding:

https://jsfiddle.net/seesyong/stL5o0ck/

If you want to pull out just the messages you could do:

this.store.select(state => state.chat)
  .subscribe(chat => {
  console.log(chat.messages);
});