Bryan Fillmer 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

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.

Folder Structure

Motivations

Clear feature ownership
Module usage predictibility (refactoring, maintainence, you know what's shared, what's not, prevents accidental regressions, avoids huge directories of not-actually-reusable modules, etc)

	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

	"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

	// 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$

	import update from 'react/lib/update'
	import { Observable, Subject, ReplaySubject } from 'rx'

	const INITIAL_STATE = {
	user: null
	}

	const updates = new ReplaySubject()
	export const state = Observable.of(INITIAL_STATE)
	.merge(updates.map(change => state => update(state, change)))