The URL

The Richardson maturity model

React state

export default class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      colors: [],
    };
  }

  componentDidMount() {
    fetch('http://localhost:2466/colors')
      .then(res => res.json())
      .then(colors => this.setState({colors}));
  }

  render() {
    return <div>
      {this.state.colors.map(
        color => <Color
            key={color.color}
            color={color.color}
            hex={color.hex}/>
      )}
    </div>;
  }
}

Demo: display & create

• What does "without needing to refresh" mean?

Pros

• State is natively supported
   
• Well-documented
   
• Well-known
   
• Triggers automatic rerendering

Cons

• State is spread around the app
   
• Callbacks get weird and bloaty
   
• State makes debugging hard
   
• State is hard to test
   
• "Undo" and "Redo"

React state

Redux

http://redux.js.org/

You might not need Redux

A Redux store is a single object

{
 messages: [
  // ...
 ],
 contactInfo: {
  // ...
 }
}

• Not directly mutable
  • Just like setState(…)
  • But for everything
     
• EVERYTHING is stored here
   
• Bad practise…?
   
• Handles rerendering

Get started!

// Can be used with any view lib (not just React)
npm install --save redux

1: Create a reducer

function reducer(
  state = {
    messages: [],
    contactInfo: {}
  }, action) {

  switch (action.type) {
    case 'ADD_MESSAGE':
      return {
        messages: [...state.messages, action.data],
        contactInfo: state.contactInfo,
      };
    case 'UPDATE_CONTACT_INFO':
      return {
        messages: state.messages,
        contactInfo: action.data,
      };
    default: return state;
  }
}

• (oldState, action) => newState
   
• A pure function
  • Accepts
    • current state
    • an action
  • Returns the new state

2: Create a Redux store

import { createStore } from 'redux';

import theReducer from './reducer.js';

const store = createStore(reducer);

• Pass the reducer to createStore(…)
   
• Done!

3: Dispatch an action

// from the reducer
case 'ADD_MESSAGE':
  return {
    messages: [...state.messages, action.data],
    contactInfo: state.contactInfo,
  };

// updating the state
store.dispatch({
  type: 'ADD_MESSAGE',
  data: {name: 'A', email: 'b@c.d', message: 'fghijklmn'},
});

• Actions = plain objects
  • Like Intent in Android
     
• Passed as argument #2 to the reducer

3: Connect to React

• Properties from mapXToProps become available as props

Map state & Dispatch
to props

Small bonus: React Devtools

https://github.com/theneva/contact-form/commit/9d9066df287015fc08ef36b33aeb7a8aff5eb5a5

Database!

Relations vs. Documents

Storage format: BSON

• Binary JSON
   
• ObjectId based on timestamp
   
• Documents "=" objects
   
• Joins

Express <3 Mongoose

var app = require('express')();
var mongoose = require('mongoose');

app.use(require('body-parser').json());

var personSchema = new mongoose.Schema({
	name: { type: String, required: true }
});

var Person = mongoose.model('Person', personSchema);

app.get('/person', function(req, res) {
	var person = new Person({
		name: 'Martin'
	});

	res.send(person);
});

app.listen(1234);

Embedded docs (sub docs)

• Ownership between types
   
• Example code
   
• /series
• /series/:seriesId
• /series/:seriesId/books
• /series/:seriesId/books/:bookId
• /books?

http://mongoosejs.com/docs/subdocs.html