bfillmer

// Explicit in-out of side-effect actions.
function epic(action$, store) {
  const fooReq$ = action$.ofType('FOO')
    .map(action => call('FOO_REQ', webapi.getFoo, action.payload.id));
  const foo$ = action$.ofType('FOO_REQ')
    .map(foo => ({ type: 'FOO_FETCHED', payload: { foo } }));

  return Observable.merge(
    fooReq$,
    foo$

bfillmer

"use strict";
const Rx = require('rx');
const fetch = require('isomorphic-fetch'); /* use the fetch api on client and server */

/**
 * Given a subreddit, pull down post ids.  that is, changing the subreddit by calling terms$.onNext(SUBREDDITNAME)
 * automatically calls the reddit api and populates the store.
 * To try it out, npm install rx and isomorphic-fetch, then
 * var S = require('./index.js');
 * S.store$.subscribe(x => console.log(x));  // listen to every state change

bfillmer

I'd got rid of action types and I'd have only actions (action creators). No strings, the function (reference) is used later for comparisons.

export const addTodo = (id, title) => ({ id, title });
export const removeTodo = id => ({ id });
actions({ addTodo, removeTodo }); // Connect it to actions.addTodo & actions.removeTodo.

That's it. They define what your app can do.

bfillmer

import { createStore, applyMiddleware } from 'redux';
import { Observable, Subject } from 'rxjs';

const api = (url, fail) => {
  console.log(`Loading API ${url}`);
  return new Promise((res, rej) => setTimeout(() => fail ? rej(`data-${url}`) : res('SUCCESS'), 1000));
};

const customSaga = iterable =>
  iterable

bfillmer

Standard JS in create-react-app

I've been using create-react-app lately as I find it very useful to kick things off while starting a project. I almost always follow JavaScript Standard Style and I found myself googling it so I figured out I should write it down.

Get Standard JS

I really like keeping dependencies as local as possible but if you prefer you can install it globally.

yarn add standard -D

or

bfillmer

# ALIASES
# Atom
alias a='open -a "atom"'
# ls -la
alias la="ls -laFG"

# NORD COLORS (https://github.com/arcticicestudio/nord)
export RED="\033[1;31m"
export GREEN="\033[1;32m"

bfillmer

# Possible MySQL dockerfile
FROM mysql:latest

ENV MYSQL_ROOT_PASSWORD=<password>

EXPOSE 3306

# Possible WordPress dockerfile
FROM wordpress:latest

bfillmer

// Expected input -> output
// [[1,2,[3]],4] -> [1,2,3,4]
const input = [[1,2,[3]],4]

const flatten = (array, base = []) => array.reduce(
  (result, current) => ((Array.isArray(current)) ? flatten(current, result) : [...result, current])
, base)

// -> [1, 2, 3, 4]
console.log(flatten(input))

bfillmer

// Basic auth0 lock functionality written functionally rather than class based.

import auth0 from 'auth0-js'

const config = {
  domain: '',
  clientID: '',
  redirectUri: '',
  audience: '',

bfillmer

const dashboardMachine = Machine({
  id: 'dashboardMachine',
  initial: 'idle',
  context: {},
  states: {
    idle: {
      on: {
        INIT: 'loadPreferences'
      }
    },