heygrady

Key concepts in a react-redux application

Redux is a collection of tools and techniques for managing a centralized "store". Essentially, your application state (your data) is kept in a central place (the store) and every part of the app that needs to read from that state does so in a controlled manner. At it's core, redux is mapping functional programming styles -- familiar to Lisp programmers -- to a modern JavaScript environment.

Many of the core concepts of react and redux can be found in other application frameworks like Angular and Ember. Classical (class based) frameworks like Ember provide a "kitchen sink" style API -- a prescriptive approach. Redux preaches a functional programming style, where composition and convention are preferred. This leads to a much smaller API but leaves a lot up to the developer.

This lack of a prescriptive API is freeing, but can lead to confusion when constructing your apps. It's up to the individual developer to follow best practices for separating concerns. The good

heygrady

{
  "data": {
    "type": "page",
    "id": "225",
    "attributes": {
      "slug": "about",
      "title": "About",
      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec nunc molestie, pharetra tortor nec, tempus nisl. Sed mattis leo vitae imperdiet efficitur. Proin vitae nibh ante. Phasellus ut turpis vitae purus semper tincidunt. Donec sed elit neque. In in aliquam magna. Vivamus ex lorem, malesuada ut tincidunt id, tristique non est. Sed tempor lorem et sem finibus, ut tempor lacus mollis. Suspendisse ornare quis tellus ut convallis. Aliquam vestibulum ligula pulvinar, facilisis nibh lacinia, cursus est. Aenean eget rutrum metus. Suspendisse potenti. Nunc in condimentum lorem.</p>\n<p>Vivamus a laoreet augue. Etiam hendrerit metus nec sem tempus, a semper nisl dignissim. Duis tempor bibendum magna quis aliquet. Ut eget dui nec nisl feugiat eleifend. Nulla egestas volutpat nulla consectetur pharetra. Ut posuere, lorem sit amet volutpat interdum, ligula dolor tempus nisi, a t

heygrady

{
  "posts": {
    "data": [
      {
        "id": 1,
        "type": "posts",
        "attributes": {
          "title": "My title",
          "content": "<p>Some markup in a string.</p>"
        },

heygrady

[
    {
        "id": 1,
        "date": "2016-05-10T07:25:45",
        "date_gmt": "2016-05-10T07:25:45",
        "guid": {
            "rendered": "https://demo.wp-api.org/?p=1"
        },
        "modified": "2016-05-10T07:25:45",
        "modified_gmt": "2016-05-10T07:25:45",

heygrady

import Ember from 'ember';
import SearchableSelect from 'ember-searchable-select/components/searchable-select';
import layout from './template';

const menuSelector = '.Searchable-select__options-list-scroll-wrapper';

export default SearchableSelect.extend({
  layout,
  classNames: ['Searchable-select-infinite'],

heygrady

Model Buffered Proxy Mixin

Makes it easy to work with models through a buffered proxy. Designed to work with the model relationship mixins and supports an identical API for buffered relationship management. This builds on the functionality of the Ember Buffered Proxy library.

New States

Normally a model has two states:

• Clean: no unsaved changes
• Dirty: some unsaved changes

A buffered model has four states:

• Clean: no unsaved changes

heygrady

Model relationship mixins

Some mixins for managing model relationships.

• belongsTo('this-model-name', 'to-model-name')
• hasMany('this-model-name', 'has-model-name')
• hasManyThrough('this-model-name', 'has-model-name', 'through-model-name')

The mixins are returned by factory functions that take standard arguments to create methods and properties based on the model names provided.

Example: Create Models

heygrady

2.0.0@mygemset

heygrady

/* place these styles in your global stylesheet */
.image {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;

heygrady

#container {
  width: 960px;
  margin: 0 auto;
}

[role="main"] {
  width: auto;
  margin: 0 0;
}