femto-flux v2.2.0

femto-flux

minimal flux

See example at https://commenthol.github.io/femto-flux

This implements a minimal flux pattern with a flux/utils compatible Store/ReduceStore. Package has no external dependencies. Around 4kB for minified ES6 code.

Installation

npm i -S femto-flux

Usage

import {Dispatcher, ReduceStore, Actions} from 'femto-flux'

// define actions
class SampleActions extends Actions {
  click (data) {
    // string for type is generated by `Actions` from method name `click`
    // therefor `type` needs to be named using the correct method name,
    // in this case `this.click.type` which expands to string "SampleActions.click"
    const type = this.click.type
    this.dispatch({type, data})
  }
}

// define a store
class SampleStore extends ReduceStore {
  reduce (state, action) {
    const {actions} = this.opts
    let nextState = state
    switch (action.type) {
      case actions.click.type:
        nextState = action.data
        break
    }
    return nextState
  }
}

// define a "react" component - just pseudo code here...
class Component {
  constructor (props) {
    Object.assign(this, {
      state: {},
      store: props.store,
      actions: props.actions,
      onChange: this.onChange.bind(this)
    })
  }
  setState (state) {
    Object.assign(this.state, state)
    this.render()
  }
  componentDidMount () {
    this.removers = [ // connect to store
      this.store.addListener(this.onChange)
    ]
  }
  componentWillUnmount () { // disconnect from store(s)
    this.removers.forEach((store) => store.remove())
  }
  onChange () {
    this.setState(this.store.getState())
  }
  onClick () {
    this.actions.click({x: 5, y: 10})
  }
  render () {
    console.log(this.state)
  }
}

// our instances / context
const dispatcher = new Dispatcher()
const actions = new SampleActions(dispatcher.dispatch)
const store = new SampleStore(dispatcher, {actions})
const c = new Component({store, actions})
c.componentDidMount()
// dispatch an action
c.onClick()
//> {x: 5, y: 10}

Run the above example with:

node example/flowReduce.js

To use Store instead of ReduceStore run:

node example/flow.js

Container

To connect a Component to various stores you may use the connect method

import {Dispatcher, ReduceStore} from `femto-flux`
import {connect} from `femto-flux`

class HelloStore extends ReduceStore {
  reduce () { return 'hello' }
}
class WorldStore extends ReduceStore {
  reduce () { return 'world' }
}
const dispatcher = new Dispatcher()
const stores = [
  new HelloStore(dispatcher),
  new WorldStore(dispatcher)
]

class Base extends Component {
  static getStores(props, context) {
    return stores
  }
  static calculateState (state, props, context) {
    return {value: stores.map(store => store.getState().value).join(' ')}
  }
  render () {
    return (<div>{this.state}</div>)
  }
}
const Container = connect(Base)

...

dispatcher.dispatch()

See ./example/container.js

License

Unlicense