malectro

const getUser = (userId) => (dispatch, getState) => {
  // create a unique key for this request
  const key = `@@getUser:${userId}`;

  // if the action creator has already fired off a request, return it
  const fetching = getState().fetching[key];
  if (fetching) {
    return fetching;
  }

malectro

@require_auth
@require_admin
def get(self):
  args = self.get_parser().parse_args()
  return User.get_by_id(args.id)

malectro

export const key = keyFunc => (
  wrappedFunc => {
    wrappedFunc.KEY = keyFunc;
    return wrappedFunc;
  };
);

malectro

export const cached = ({ttl = 60000}) => wrappedFunc => {
  // require the action creator to have a KEY
  if (!wrappedFunc.KEY) {
    throw new Error('Must use key() decorator first before fetching');
  }

  // the higher order action creator
  const cachedWrapped = (...args) => (dispatch, getState) => {
    const keyValue = wrappedFunc.KEY.apply(this, args);

malectro

// @flow

import React, {Component, Children} from 'react';
import {findDOMNode} from 'react-dom';
import {TransitionGroup} from 'react-transition-group';


const OnlyChild = ({children}) => (
  Children.toArray(children)[0] || null
);

malectro

Redux TTL

The Premise

Currently a request to the api for filtered data is inserted into our store in a normalized fashion.

For example, getting audience-members/${audienceMemberId}/due-events returns a set of DueEvents, which are dumped in a single object that holds all due events regardless of audience member (or any other filter properties).

Then when the list is rendered, a selector refilters the DueEvents stored in the heap by audienceMemberId.