heygrady

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

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

Loading data in a react-redux app

This document covers the details of a component that needs to fetch required data before rendering. In our imaginary app we're using react, redux, and react-router. We're covering the specific use-case of a detail page that gets its id from the URL.

1. URL contains an ID, it is matched by a route like <Route path="/detail/:id" component={View} />, which renders our <View />
2. The <View /> component receives match in props. The match prop contains the ID in match.params.id.
3. The <View /> component renders some <MyContainer id={match.params.id} /> component with an id prop.
4. The <MyContainer id={match.params.id} /> container selects values from the state as props and passes them to the wrapped <My /> component.
5. When <My /> component's lifecycle encounters componentWillMount or componentWillReceiveProps, it calls an onBeforeRender function (passed in from mapDispatchToProps by <MyContainer />)
6. Then `` dispatches a

heygrady

Case Study: <Map /> and <List />

This is a case-study of sketching out a <Map /> (a Google Map) that shows pins and a sidebar <List /> that shows results. The two components are displaying the same data (items), side-by-side, in two different formats. If I make a change to list of items, both components need to update.

Features:

• Items
  • Shown as pins on the map
  • Shown as list items in the list
• Filter the list

heygrady

Managing fetch actions

If you are fetching data from a server, your app needs to manage that relationship. The redux manual demonstrates the need for at least three action: FETCH_REQUEST, FETCH_FAILURE, and FETCH_SUCCESS. The redux manual's reddit example shows a slightly different setup, omitting the FAILURE and renaming SUCCESS to RECEIVE_DATA.

Long story short, we need to expose the API data fetching lifecycle to our app.

Fetching lifycycle:

1. begin fetching
2. receive data or receive error (or bail when cancelled)

heygrady

Lazy loading (using IntersectionObsever) in a React app

The Lighthouse performance audit tool recommends lazy-loading offscreen images (and other content)

They go a step further and recommend using the new IntersectionObserver API to manage offscreen content. Of course, you need to use a polyfill to target old browsers (core-js doesn't offer a polyfill).

The documentation provided by the Lighthouse team warns against over-applying the IntersectionObserver. The have a whole section devoted to explaining why you don't want to [intersect all the things](https://developers.google.com/web/updates/2016/04/intersectiono

heygrady

Redux modules

Our applications have grown organically and our current collection of actions, reducers and selectors are due for an upgrade. This document is an attempt to outline an better way to organize our redux code.

The biggest changes here are the introduction of "modules" and redux-sagas.

Core concepts

• modules — a grouping of actions, constants, reducers, etc. that all deal with the same portion of the state.
• actions — action creators

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

.box {
  -moz-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
  -o-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
}

heygrady

Rules for crafting good components

Here are some good rules for a high-quality react-redux app.

We're in the process of reworking our app to make it more maintainable. In a previous meeting we discussed the general rules of thumb for writing maintainable code. Here we're going to be covering rules of thumb for writing good components.

1. Components should do one thing.
   • We use BEM as a guide.
   • A nested "block" should be a standalone component.
2. Prefer stateless functional components.