simple-ducks-builders

simple redux ducks module builders

simpleListBuilder

# state.coffee

import {getList} from './dataProvider'
import {simpleListBuilder} from 'simple-ducks-builders'

MODULE = 'myList'

moduleBuilder = simpleListBuilder(MODULE)

export reducer = moduleBuilder.reducer
export actions = {
  loadList: -> moduleBuilder.actions.loadList(getList)
}

# dataProvider.coffee
export getList = ->
  new Promise (resolve) -> resolve [{id:1, title:'a'},{id:2, title:'2'},]

container.coffee:

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions as myListActions} from './state'

class Container =
  componentDidMount: -> @props.actions.loadList()

  render: ->
    {isLoading, isReady, list} = @props.myListState
    return <span>loading</span> if isLoading || !isReady
    <div>
      {
        for item in list
          <div key={item.id}>{item.title}</div>
      }
    </div>

mapState = (state, ownProps) ->
  myListState: state.myList

mapActions = (dispatch, ownProps) ->
  actions: bindActionCreators myListActions, dispatch

export default connect(mapState, mapActions)(Container)

simpleFormBuilder

# state.coffee

import {simpleFormBuilder} from 'simple-ducks-builders'
MODULE_STATE_NAME = 'myItem'

formBuilder = simpleFormBuilder(MODULE_STATE_NAME)

loadItem = (id) ->
  formBuilder.actions.loadItem getItem.bind(null, id)
saveItem = formBuilder.actions.saveItem updateItem

export reducer = formBuilder.reducer
export actions = {
  loadItem,
  saveItem,
  setField: formBuilder.actions.setField
}

# container.coffee

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions as myItemActions} from './state'

class Container =
  componentDidMount: ->
    @props.actions.loadItem(@props.id)

  render: ->
    {isLoading, isReady, inProgress, item} = @props.myItemState
    {setField, saveItem} = @props.actions
    return <span>loading</span> if isLoading || !isReady
    <div>
      <input
        value={item.title}
        onChange={(e) -> setField 'title', e.target.value}
        disabled={inProgress}
      />
      <button
        onClick={saveItem}
        disabled={!isChanged || inProgress}
      >Save</button>
    </div>

mapState = (state, ownProps) ->
  id: Number router.params.id
  myItemState: state.myItem

mapActions = (dispatch, ownProps) ->
  actions: bindActionCreators myItemActions, dispatch

export default connect(mapState, mapActions)(Container)

catchErrorsBuilder

selectItemBuilder