state-provider api

App.js

import { createStateProvider, createStateSlicer } from 'state-provider'

import ProfileForm from './ProfileForm'

const Provider = createStateProvider('app')
const Slicer = createStateSlicer('app')

async function saveUser(user) {
  await api.saveUser(user) 
}

const state = {
  user: null
}

const reducer = (state, action) => {
  switch (action.type) {
    // reduce
    default:
       return state
  }
}

const enhancer = next => (...args) => {
  const store = next(...args)
  // enhance
  return store
}

export default function App() {
  return (
    <Provider state={state} reducer={reducer} enhancer={enhancer}>
      <Slicer slice='user' onValue={saveUser}>
        {({ value, setValue }) => 
          <ProfileForm user={value} saveUser={setValue} />
        }
      </Slicer>
    </Provider>
  )
}

ProfileForm.js

import { createStateProvider, createStateSlicer } from 'state-provider'

import api from '../api'
import { Form, Input, Button } from './'

const Provider = createStateProvider('form')
const Slice = createStateSlicer('form')

async function isUnique(username) {
  await api.isUniqueUsername(username)
}

export default function UserForm({ user, saveUser }) {  
  return (
    <Provider state={user} onCommit={saveUser}>
      {({ commit, onCommitError }) =>
        <Form onSubmit={commit}>
          <Slicer slice='username' onValue={isUnique}>
            {({ value, setValue, onValueError }) =>
              <Input type='text' value={value} onChange={setValue} />
            }
          </Slice>
          <Button label='Save' />
        </Form>
      }
    </Provider>
  )
}