preact-smitty

Preact bindings for smitty

npm install -S preact-smitty

Basics

const Title = track(
  // action type to update state on
  'ui/RESIZE',
  // key to pass as prop
  'screen',
  // select the value of 'screen' when the action is emitted
  state => state.ui.screen,
  // shouldTrackerUpdate = () => true
  (state, props, type, payload) => payload !== state.ui.screen
)(
  ({ screen, children }) =>
    screen < MEDIUM_SCREEN ? <h3>{children[0]}</h3> : <h1>{children[0]}</h1>
)
 
let mapStateToProps = (state, { id }) => {
  return {
    room: state.rooms[id]
  }
}
const Room = connect(mapStateToProps)(
  class Room extends Component {
    render ({ room = {} }) {
      console.log(room) // logs { id: '1', ... }
      return <Title>room.title</Title>
    }
  }
)
 
render(
  <Provider store={store}>
    <Room id={'1'}
  </Provider>,
  document.body
)

Demos (v2)

• Photo Booth

Demos (v1)

• Basic
  • Map as state
  • Immutable.Map as state
• Async
  • Fetch api with Immutable.Map as state
• Fun
  • UI colors with Immutable.Map as state
  • UI colors with custom class as state
  • Scroll sync