Angular ngrx - Revision history

Iwiseman: /* Introduction */

2020-09-06T08:27:15Z

Introduction

← Older revision		Revision as of 08:27, 6 September 2020
Line 628:		Line 628:
	=Doing Update=		=Doing Update=
	==Introduction==		==Introduction==
	This is a second ~~walkthrough~~ of the process. Hopefully this will show any gaps in the current documentation. For the update we need to do the same as the ~~add with the exception of changing the current product from a product to a product id~~		This is a second walk through of the process. Hopefully this will show any gaps in the current documentation. For the update we need to do the same as the load products

	==Define Actions==		==Define Actions==
	We need three new action update, success and failure.		We need three new action update, success and failure.

Iwiseman: /* Doing Update */

2020-09-06T08:26:25Z

Doing Update

← Older revision		Revision as of 08:26, 6 September 2020
Line 538:		Line 538:
	)		)
	</syntaxhighlight>		</syntaxhighlight>
	~~=Doing Update=~~		=Change Interface=
	~~==Introduction==~~		We are going to change the interface on the same to have a product id rather than a product
	This is a second walkthrough of the process. Hopefully this will show any gaps in the current documentation. For the update we need to do the same as the add with the exception of changing the current product from a product to a product id
	==Change Interface==
	~~Change~~ the interface~~, selectors~~ to have product id ~~with~~ a ~~null for current~~ product.
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
	// Change interface		// Change interface
Line 627:		Line 624:
	}),		}),
	</syntaxhighlight>		</syntaxhighlight>


			=Doing Update=
			==Introduction==
			This is a second walkthrough of the process. Hopefully this will show any gaps in the current documentation. For the update we need to do the same as the add with the exception of changing the current product from a product to a product id
	==Define Actions==		==Define Actions==
	We need three new action update, success and failure.		We need three new action update, success and failure.

Iwiseman: /* Doing Update */

2020-09-06T08:24:37Z

Doing Update

← Older revision		Revision as of 08:24, 6 September 2020
Line 538:		Line 538:
	)		)
	</syntaxhighlight>		</syntaxhighlight>
	==Doing Update==		=Doing Update=
	===Introduction===		==Introduction==
	This is a second walkthrough of the process. Hopefully this will show any gaps in the current documentation. For the update we need to do the same as the add with the exception of changing the current product from a product to a product id		This is a second walkthrough of the process. Hopefully this will show any gaps in the current documentation. For the update we need to do the same as the add with the exception of changing the current product from a product to a product id
	===Change Interface===		==Change Interface==
	Change the interface, selectors to have product id with a null for current product.		Change the interface, selectors to have product id with a null for current product.
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 627:		Line 627:
	}),		}),
	</syntaxhighlight>		</syntaxhighlight>
	===Define Actions===		==Define Actions==
	We need three new action update, success and failure.		We need three new action update, success and failure.
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 646:		Line 646:
	</syntaxhighlight>		</syntaxhighlight>

	===Dispatching Action===		==Dispatching Action==
	'''Template-driven''' forms are not used with ngRx because they update immediately. We are expected to use '''Reactive Forms'''		'''Template-driven''' forms are not used with ngRx because they update immediately. We are expected to use '''Reactive Forms'''
	In the form we need to		In the form we need to
Line 676:		Line 676:
	</syntaxhighlight>		</syntaxhighlight>

	===Build Update Effect===		==Build Update Effect==
	To create this we use concatMap rather than mergeMap		To create this we use concatMap rather than mergeMap
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 691:		Line 691:

	</syntaxhighlight>		</syntaxhighlight>
	===Create Reducer Functions for Actions===		==Create Reducer Functions for Actions==
	We need a success and failure. For success we need to create a copy of the array but replacing the change item with the one provided in the action. We also need to change the currentProductId to be the id of the action product id.		We need a success and failure. For success we need to create a copy of the array but replacing the change item with the one provided in the action. We also need to change the currentProductId to be the id of the action product id.
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 711:		Line 711:
	</syntaxhighlight>		</syntaxhighlight>
	'''Make sure you use a immutable method when dealing with state ie not for loops'''		'''Make sure you use a immutable method when dealing with state ie not for loops'''
	~~==Architecture Changes~~
	=Architecture Considerations=		=Architecture Considerations=
	==Presentation and Container==		==Presentation and Container==

Iwiseman: /* Architecture Considerations= */

2020-09-06T08:22:01Z

Architecture Considerations=

← Older revision		Revision as of 08:22, 6 September 2020
Line 712:		Line 712:
	'''Make sure you use a immutable method when dealing with state ie not for loops'''		'''Make sure you use a immutable method when dealing with state ie not for loops'''
	==Architecture Changes		==Architecture Changes
	=Architecture Considerations==		=Architecture Considerations=
	==Presentation and Container==		==Presentation and Container==

Iwiseman: /* Architecture Considerations */

2020-09-06T08:21:33Z

Architecture Considerations

← Older revision		Revision as of 08:21, 6 September 2020
Line 712:		Line 712:
	'''Make sure you use a immutable method when dealing with state ie not for loops'''		'''Make sure you use a immutable method when dealing with state ie not for loops'''
	==Architecture Changes		==Architecture Changes
	==Architecture Considerations==		=Architecture Considerations==
	===Presentation and Container===		==Presentation and Container==

	===On Push===		==On Push==
	This seems to be pretty important the course mentioned without OnPush the components are all checked for changes from the root component downwards unless onPush is specified. If you do specify OnPush on a component it will only be updated if		This seems to be pretty important the course mentioned without OnPush the components are all checked for changes from the root component downwards unless onPush is specified. If you do specify OnPush on a component it will only be updated if
	*A new input reference is passed or		*A new input reference is passed or
	*A DOM Event handler of the component is triggered		*A DOM Event handler of the component is triggered
	*You Use an async pipe in the components template or it's children		*You Use an async pipe in the components template or it's children
	===Barrel Files (index.ts)===		==Barrel Files (index.ts)==
	These are files which are usually named index.ts. They contain enough information for other parts of the app or the system to consume our functionality. In the original workflow we created files which include more the one concerned for convenience. In this section we will correct this.		These are files which are usually named index.ts. They contain enough information for other parts of the app or the system to consume our functionality. In the original workflow we created files which include more the one concerned for convenience. In this section we will correct this.
	====Reducer====		===Reducer===
	We separate what people need to consume and what is internal to the reducer.		We separate what people need to consume and what is internal to the reducer.
	<br>		<br>
Line 734:		Line 734:
	* Initial module state		* Initial module state
	* Create Reducer functions		* Create Reducer functions
	====Actions====		===Actions===
	Some actions are used on the pages and some are used to call APIs. We separate this to make it clear.		Some actions are used on the pages and some are used to call APIs. We separate this to make it clear.
	<br>		<br>
Line 756:		Line 756:
	** loadProducts		** loadProducts

	===Breaking Down State===		==Breaking Down State==
	Three approaches are provided below for breaking out state from the module.		Three approaches are provided below for breaking out state from the module.
	<br>		<br>
	[[File:Angular modules state.png\|800px]]		[[File:Angular modules state.png\|800px]]

Iwiseman: /* Actions */

2020-09-06T08:18:45Z

Actions

← Older revision		Revision as of 08:18, 6 September 2020
Line 745:		Line 745:
	export {ProductAPIActions, ProductPageActions}		export {ProductAPIActions, ProductPageActions}
	</syntaxhighlight>		</syntaxhighlight>
	~~<br>~~
	product-api.ts		product-api.ts
	* All of the Outbound API Actions, e.g.		* All of the Outbound API Actions, e.g.
Line 756:		Line 755:
	** setCurrentProduct		** setCurrentProduct
	** loadProducts		** loadProducts

	===Breaking Down State===		===Breaking Down State===
	Three approaches are provided below for breaking out state from the module.		Three approaches are provided below for breaking out state from the module.
	<br>		<br>
	[[File:Angular modules state.png\|800px]]		[[File:Angular modules state.png\|800px]]

Iwiseman: /* Breaking Down State */

2020-09-06T08:18:15Z

Breaking Down State

← Older revision		Revision as of 08:18, 6 September 2020
Line 758:		Line 758:
	===Breaking Down State===		===Breaking Down State===
	Three approaches are provided below for breaking out state from the module.		Three approaches are provided below for breaking out state from the module.
			<br>
	[[File:Angular modules state.png\|800px]]		[[File:Angular modules state.png\|800px]]

Iwiseman: /* Actions */

2020-09-06T08:17:58Z

Actions

← Older revision		Revision as of 08:17, 6 September 2020
Line 756:		Line 756:
	** setCurrentProduct		** setCurrentProduct
	** loadProducts		** loadProducts
			===Breaking Down State===
			Three approaches are provided below for breaking out state from the module.
			[[File:Angular modules state.png\|800px]]

Iwiseman: /* Barrel Files */

2020-09-06T08:16:25Z

Barrel Files

← Older revision		Revision as of 08:16, 6 September 2020
Line 720:		Line 720:
	*A DOM Event handler of the component is triggered		*A DOM Event handler of the component is triggered
	*You Use an async pipe in the components template or it's children		*You Use an async pipe in the components template or it's children
	===Barrel Files===		===Barrel Files (index.ts)===
	These are files which are usually named index.ts. They contain enough information for other parts of the app or the system to consume our functionality. In the original workflow we created files which include more the one concerned for convenience. In this section we will correct this.		These are files which are usually named index.ts. They contain enough information for other parts of the app or the system to consume our functionality. In the original workflow we created files which include more the one concerned for convenience. In this section we will correct this.
	====Reducer====		====Reducer====

Iwiseman: /* Presentation and Container */

2020-09-06T08:15:52Z

Presentation and Container

← Older revision		Revision as of 08:15, 6 September 2020
Line 712:		Line 712:
	'''Make sure you use a immutable method when dealing with state ie not for loops'''		'''Make sure you use a immutable method when dealing with state ie not for loops'''
	==Architecture Changes		==Architecture Changes
			==Architecture Considerations==
	===Presentation and Container===		===Presentation and Container===

	===On Push===		===On Push===
	This seems to be pretty important the course mentioned without OnPush the components are all checked for changes from the root component downwards unless onPush is specified. If you do specify OnPush on a component it will only be updated if		This seems to be pretty important the course mentioned without OnPush the components are all checked for changes from the root component downwards unless onPush is specified. If you do specify OnPush on a component it will only be updated if