Architecting Angular Applications with Redux, RxJS, and NgRx

Add reducer and constants

Let's create our reducer, like so:

// jedi/jedi-list/jedi-list.reducer.tsimport {   ADD_JEDI,   REMOVE_JEDI,   LOAD_JEDIS } from './jedi-list.constants.ts'const initialState = [];export function jediListReducer(state = initialState, action) {  switch(action.type) {    case ADD_JEDI:      return [ ...state, { ...action.payload }];    case REMOVE_JEDI:      return state.filter(jedi => jedi.id !== action.payload.id);    case LOAD_JEDIS:      return action.payload.map(jedi => ({ ...jedi}));    default:      return state;  }}

Our next order of business is our constants file, which has already been created and just need to move, like so:

// jedi/jedi-list/jedi-list-constants.tsexport const ADD_JEDI = 'ADD_JEDI';export const REMOVE_JEDI = "REMOVE_JEDI";export ...