Stan Shumsky StanShumsky

Comprehensive Introduction to @ngrx/store

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

Single Page Apps are ruling the world and AngularJS is leading the charge. But many of the lessons we learned in the Web 2.0 era no longer apply, and few are as drastically different as authentication.

CORS

CORS is an oft-misunderstood feature of new browsers that is configured by a remote server. CORS stands for Cross-Origin-Resource-Sharing, and was designed to make it possible to access services outside of the current origin (or domain) of the current page.

Like many browser features, CORS works because we all agree that it works. So all major browsers like Chrome, Firefox, and IE support and enforce it. By using these browsers, you benefit from the security of CORS.

That means certain browsers do not enforce it, so it is not relevant there. One large example is a native Web View for things like Cordova and Phonegap. However, these tools often have configuration options for whitelisting domains so you can add some security that way.

	import React from "react";
	import { render } from "react-dom";

	const ParentComponent = React.createClass({
	getDefaultProps: function() {
	console.log("ParentComponent - getDefaultProps");
	},
	getInitialState: function() {
	console.log("ParentComponent - getInitialState");
	return { text: "" };

	import { combineReducers } from 'redux';
	import users from './reducers/users';
	import posts from './reducers/posts';

	export default function createReducer(asyncReducers) {
	return combineReducers({
	users,
	posts,
	...asyncReducers
	});

	<responsive>
	<div ng-switch='screenSize'>
	<div ng-switch-when='small'>
	<h1>Small Screen</h1>
	</div>
	<div ng-switch-when='medium'>
	<h1>Medium Screen</h1>
	</div>
	<div ng-switch-when='large'>
	<h1>Large Screen</h1>

	//WebSocket
	.factory('WebsocketService', ['$rootScope', '$timeout', function ($rootScope, $timeout) {

	var _ws;
	var _username = '';
	var messages = [];
	var users = [];

	function onMessage(e) {
	var data = JSON.parse(decodeURIComponent(e.data));

	upstream myapp {
	server 127.0.0.1:8081;
	}

	limit_req_zone $binary_remote_addr zone=login:10m rate=1r/s;

	server {
	listen 443 ssl spdy;
	server_name _;

	(function () {
	'use strict';

	angular.module('main')
	.provider('cache', function () {

	// #region initialization

	var storage;

	(function () {

	/*
	* @name ngRightClick
	* @type Directive
	* @desc Binds the right click to a javascript function by using the ng-right-click attribute
	*/
	function ngRightClick($parse) {

	return function (scope, element, attrs) {

	(function () {
	'use strict';

	// Define the factory on the module.
	// Inject the dependencies.
	// Point to the factory definition function.
	angular.module('brew-everywhere').factory('messaging_service',
	[messaging_service]);

	function messaging_service() {