Bryan Fillmer bfillmer

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)

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.

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

	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)))

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

	"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

	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