State management: Thought process

gistfile1.txt

1. Identify feature: "Messages"
2. Define state: { messages: Message[], selectedMessage: Message }
3. Define actions: LoadMessages, LoadMessagesSuccess, LoadMessagesError, SelectMessage
4. Define reducers:
   function messagesReducer(state, action) {
     switch(action.type) {
       case LoadMessagesSuccess: return { ...state, messages: action.payload };
       case SelectMessage: return { ...state, selectedMessage: action.payload };
       default: return state;
     }
   }
5. Define selectors:
   function selectMessages(state) { return state.messages; }
   function selectSelectedMessage(state) { return state.selectedMessage; }
6. Implement effects:
   class MessagesEffects {
     loadMessages$ = createEffect(() => this.actions$.pipe(
       ofType(LoadMessages),
       switchMap(() => this.messagesService.findAll().pipe(
         map(messages => LoadMessagesSuccess({ payload: messages })),
         catchError(() => of(LoadMessagesError()))
       ))
     ));
   }
7. Update component:
   class MessagesComponent {
     messages$ = this.store.select(selectMessages);
     selectedMessage$ = this.store.select(selectSelectedMessage);
     constructor(private store: Store) {}
     ngOnInit() { this.store.dispatch(LoadMessages()); }
     selectMessage(message) { this.store.dispatch(SelectMessage({ payload: message })); }
   }