Reduce boilerplate

Instead of changing the API #484, let’s approach and try to come up with a solution for the boilerplate problem within the current architecture.

Importing/Exporting modules

// ABC.js
import { B } from "./B"
import { C } from "./C"

export const state = {
  value: 0,
  B: B.state,
  C: C.state
}
export const actions = {
  add: value => state => ({ value: state.value + value }),
  B: B.actions,
  C: C.actions
}

Setup

import  { A } from "./A"
import  { B } from "./B"
import  { C } from "./C"

app({
  state: {
    A: A.state,
    B: B.state,
    C: C.state
  },
  actions: {
    A: A.actions,
    B: B.actions,
    C: C.actions
  }
})

Props

const view = state => actions => (
  <App>
    <Feed state={state.feed} actions={actions.feed} />
    <Trend state={state.trend} actions={actions.trend} />
  </App>
)

// OR

const view = state => actions => (
  <App>
    <Feed
      model={{
        ...state.feed,
        ...actions.feed
      }}
    />
    <Trend
      model={{
        ...state.trend,
        ...actions.trend
      }}
    />
  </App>
)

@lukejacksonn @SkaterDad @okwolf @zaceno @Alber70g

[Zhami]

I prefer the proposed view signature of ({state, actions}). The current (0.16.2) approach of double fat arrows state => actions => h() to me implies/suggests that there is an opportunity for currying, but that is not really the case.

[SkaterDad]

This is definitely a nice incremental improvement!

I’m voting for changing the view signature also. Dont really care which of the 2 proposed solutions, they’re both nicer.