View action-creator-vs-reducer.md

When should you use action creator and when reducer?

Action creator

  • you need to have side effects
  • you need to read from store to decide what to do
  • you need to dispatch more than one action
  • action produced by action creator needs to contain all the data reducer can need to shape the components state

Reducer

  • should not have any side effects
View jss-es6-example-1.js
export default {
input: {
display: 'inline-block',
width: '100%',
height: '100%',
lineHeight: 0
},
browser: {
position: 'absolute',
width: '100%',
View decorated-component.js
import {component} from 'react'
@component
export default class MyComponent {
componentDidMount() {
}
render() {
}
}
View Section.js
'use strict'
import React from 'react'
import useSheet from 'react-jss'
import sectionStyle from './sectionStyle'
import Item from './Item'
/**
* One list section which has a title and list items.
*/
View fastClickSurfacePatch.js
define(function(require, exports, module) {
var Surface = require('famous/core/Surface')
// https://github.com/Famous/core/issues/37
Surface.prototype.emit = function(type, event) {
if (event && !event.origin) event.origin = this;
return this.eventHandler.emit(type, event);
}
})
View BaseTransition.js
define(function(require, exports, module) {
'use strict'
var CachedMap = require('famous/transitions/CachedMap')
var Transform = require('famous/core/Transform')
var _ = require('underscore')
function BaseTransition(options) {
var o = this.options = _.extend({}, this.constructor.DEFAULT_OPTIONS, options)
var spec = this.spec = {}
View app.js
exports.ready = new Promise(function(fulfill, reject) {
var isResized, isDomReady
var isDeviceReady = !window.cordova
context.on('resize', function() {
isResized = true
resolve()
})
domready(function() {
View SomeView.js
SomeView.prototype.show = function() {
var prevAnimation = {
transition: {},
transform: {}
}
var thisAnimation = {
transition: {},
transform: {}
}
View structure.md

app

  1. lib (app unspecific, installed from bower, npm or component)
  • lib1
  1. src (app specific)
  • screens (take components and build screens)
    • screen1
      • models
        • Model1.js
      • views
        • View1.js
View famous-scrollview.js
/* globals define */
define(function(require, exports, module) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var Scrollview = require("famous/views/Scrollview");
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');