Khalil Zaidoun KhalilZaidoun

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

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

A bit of context

This is a companion Gist for a talk that I gave at React Berlin in April 2015. The fine folks at Bitcrowd recorded all three of the evening's talks, so you can watch mine at https://www.youtube.com/watch?v=9ArhJiMGVDc.

Hi there!

React Berlin - Meetup #1

Peter Magenheimer (@peterjmag)
I'm a front end developer at ResearchGate. And yes, we're hiring.

Git Cheat Sheet

Commands

Getting Started

git init

or

	RN < 0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
	RN >= 0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
	RN >= 0.63 - watchman watch-del-all && rm -rf node_modules && npm install && rm -rf /tmp/metro-* && npm run start --reset-cache

	npm >= 5 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache

	Windows - del %appdata%\Temp\react-native-* & cd android & gradlew clean & cd .. & del node_modules/ & npm cache clean --force & npm install & npm start -- --reset-cache

	// While I claim this is a drop-in replacement, it is a little bit slower.
	// If you have hundreds of links, you might spend a few more milliseconds rendering the page on transitions.

	// KNOWN ISSUES WITH THIS APPROACH:

	// * This doesn't work great if you animate route changes with <TransitionGroup>
	// because the links are going to get updated immediately during the animation.
	// * This might still not update the <Link> correctly for async routes,
	// as explained in https://github.com/reactjs/react-router/issues/470#issuecomment-217010985.

	'use strict';

	var React = require('react-native');

	var {
	StyleSheet,
	View,
	ListView,
	TouchableHighlight,
	RefreshControl,


	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	/* CSS */

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {

	// This works on all devices/browsers, and uses IndexedDBShim as a final fallback
	var indexedDB = window.indexedDB \|\| window.mozIndexedDB \|\| window.webkitIndexedDB \|\| window.msIndexedDB \|\| window.shimIndexedDB;

	// Open (or create) the database
	var open = indexedDB.open("MyDatabase", 1);

	// Create the schema
	open.onupgradeneeded = function() {
	var db = open.result;
	var store = db.createObjectStore("MyObjectStore", {keyPath: "id"});