Angular + Redux Debugging

Redux

Sounds like a cool new technology
It's more of a convention

TRIVIA TIME !!!

Answer

Redux = (Red)ucer + Fl(ux)
Reducer reduces (state, action) into state - like Array.prototype.reduce()
Flux: architectural pattern
Dan Abramov presents time traveling 💥💥💥

“I was thinking about Flux as a reduce operation over time... your stores, they accumulate state in response to these actions. I was thinking of taking this further. What if your Flux store was not a store but a reducer function?”
- Dan Abramov

What problem tries to solve redux?

What problem tries to solve Redux?

(arguably) UI usually has more state than the backend
buttons, forms, inputs on a SPA
component interactions (child to parent prop, parent to child func)
unidirectional data flow

https://gist.github.com/conorhastings/ba8a06ce061466ac3fe7

      
        /*
      
        * The reason for this is just a thought exercise
      
        * often people(myself super included) are so confused
      
        * when trying something new, but breaking it down
      
        * to it's simplest existence can be the best way to understand
      
        */
      
        function createStore(reducer, initState) {
      
        	let state = initState;
      
        	let subscribers = [];
      
        	const getState = () => state;
      
        	const dispatch = action => {
      
        		state = reducer(state, action);
      
        		subscribers.forEach((subscriber) => subscriber());
      
        		return action;
      
        	}
      
        	const subscribe = (listener) => {
      
        		subscribers.push(listener);
      
        		return () => {
      
        			subscribers = subscribers.slice(subscribers.indexOf(listener) + 1, 1);
      
        		};
      
        	}
      
        	return {
      
        		dispatch,
      
        		subscribe,
      
        		getState
      
        	}
      
        }
      
        const initState = {
      
        	name: "Conor",
      
        	redux: "awesome"
      
        };
      
        const myReducer = (state, action) => {
      
        	let newState = Object.assign({}, state);
      
        	switch (action.type) {
      
        		case "CHANGE_NAME":
      
        			newState.name = action.name;
      
        			break;
      
        		case "CHANGE_REDUX_ADJECTIVE":
      
        			newState.redux = action.adjective;
      
        			break;
      
        		default: 
      
        			//do nothing
      
        	}
      
        	return newState
      
        };
      
        const store = createStore(myReducer, initState);
      
        console.log(store.getState(), "initial state");
      
        const subscriber = store.subscribe(() => {
      
        	console.log("i'll console state changes twice then unsubscribe so you will not be notified of the third dispatch", store.getState());
      
        });
      
        store.dispatch({
      
        	type: "CHANGE_NAME",
      
        	name: "Conor Hastings"
      
        });
      
        store.dispatch({
      
        	type: "CHANGE_REDUX_ADJECTIVE",
      
        	adjective: "great"
      
        });
      
        subscriber();
      
        store.dispatch({
      
        	type: "CHANGE_NAME",
      
        	name: "Conor Cool Guy"
      
        });
      
        console.log("the state changed but since we unsubscribed the listener above was not notified o the final dispatch", store.getState());

view raw simple-redux.js hosted with ❤ by GitHub

Redux Devtools

http://extension.remotedev.io/
time traveling
persist state on page reload
skip (cancel) actions
dispatch custom actions

DEMO TIME !

http://extension.remotedev.io/#demo

NgRx

RxJS powered state management for Angular applications, inspired by Redux

NgRx Effects

NgRx Effects - our setup

dispatch an action (`LOAD_FLOW`)
an Effect listens to that action
this effect calls a service (`this.shopService.getFlowByPageId`)
with RxJS magic (operators) the effect listens to success/failure
and shoots another action with data / error message (`(response: Flow) => new shopActions.LoadFlowSuccessAction(response)`)

NgRx Effects - our setup #2

components are listening to store changes
via "selectors" (derived data)

export class ShopService {
  flow$ = this.store.pipe(select(getFlow));
  // ...
}

NgRx Effects - our setup #3

in the template you can unwrap it by the "async" pipe

<suite-shop-card-content [flow]="flow$ | async">
</suite-shop-card-content>

why is redux good for us?

UI architecture
does not need to know about it's surrounding
!!TODO!!: don't forget to add something here about smart and dumb components

Angular + Redux Debugging

Redux

TRIVIA TIME !!!

Where does the name "Redux" come from?

Answer

What problem tries to solve redux?

What problem tries to solve Redux?

Redux Devtools

DEMO TIME !

NgRx

NgRx Effects

NgRx Effects - our setup

NgRx Effects - our setup #2

NgRx Effects - our setup #3

why is redux good for us?

Possible follow ups

NgRx Entities

	/*
	* The reason for this is just a thought exercise
	* often people(myself super included) are so confused
	* when trying something new, but breaking it down
	* to it's simplest existence can be the best way to understand
	*/
	function createStore(reducer, initState) {
	let state = initState;
	let subscribers = [];

	const getState = () => state;
	const dispatch = action => {
	state = reducer(state, action);
	subscribers.forEach((subscriber) => subscriber());
	return action;
	}
	const subscribe = (listener) => {
	subscribers.push(listener);
	return () => {
	subscribers = subscribers.slice(subscribers.indexOf(listener) + 1, 1);
	};
	}
	return {
	dispatch,
	subscribe,
	getState
	}
	}

	const initState = {
	name: "Conor",
	redux: "awesome"
	};
	const myReducer = (state, action) => {
	let newState = Object.assign({}, state);
	switch (action.type) {
	case "CHANGE_NAME":
	newState.name = action.name;
	break;
	case "CHANGE_REDUX_ADJECTIVE":
	newState.redux = action.adjective;
	break;
	default:
	//do nothing
	}
	return newState
	};

	const store = createStore(myReducer, initState);

	console.log(store.getState(), "initial state");

	const subscriber = store.subscribe(() => {
	console.log("i'll console state changes twice then unsubscribe so you will not be notified of the third dispatch", store.getState());
	});

	store.dispatch({
	type: "CHANGE_NAME",
	name: "Conor Hastings"
	});

	store.dispatch({
	type: "CHANGE_REDUX_ADJECTIVE",
	adjective: "great"
	});

	subscriber();

	store.dispatch({
	type: "CHANGE_NAME",
	name: "Conor Cool Guy"
	});

	console.log("the state changed but since we unsubscribed the listener above was not notified o the final dispatch", store.getState());