API - notsunohito/orex GitHub Wiki

Hello World

live demo

import React from 'react'
import {render} from 'react-dom'
import {createStore, Provider} from 'orex'


const initialState = { message: 'Hello World!' }
const store = createStore(initialState)

const HelloWorld = ({state, action})=> (
  <div>
    <input
      type="text"
      value={state.message}
      onChange={(e)=> action.message.set(e.target.value)}
    />
    <p>{state.message}</p>
  </div>
)

render(
  <Provider store={store}>
    <HelloWorld />
  </Provider>,
  document.querySelector('#app')
)

API

Orex

  • createStore(initialState)
    • returns store:Store
  • <Provider {store:Store, mapStoreToProps:(store)=>{state, action}}>
    • provides props{store, action} for child react component.
    • supports mapStoreToProps
      • default (store)=>{state, action}

Store

  • getState()
    • returns currentState
  • getAction()
    • returns action:ActionProxy
  • subscribe(callback:(currentState)=>any)

ActionProxy

  • Proxies modifying store's state.

ActionProxy.{{key}}.{{key}}.set(value)

  • set value to state[key][key] to value 
import {createStore} from 'orex'
const initialState = {
  gretting: {
    message: 'Hi!'
  }
}
const store = createStore(initialState)

// action:ActionProxy
const action = store.getAction()

// set 'Bye!' to greeting.message
action.greeting.message.set('Bye!')

store.getState()
// => { greeting: { message: 'Bye!' } }

ActionProxy.at(index:number)

  • Allows specifying index of collection.
const initialState = {
  users: [
    {name: 'Pure'},
    {name: 'Daizu'},
    {name: 'Momo'}
  ]
}
const store = createStore(initialState)
const action = store.getAction()

// at(index) allows specifying the index of collection.
action.users.at(2).name.set('Konoha')

store.getState()
/**
=> {
     users: [
       {name: 'Pure'},
       {name: 'Daizu'},
       {name: 'Konoha'}
     ]
   }
**/

Available Updater

  • Modifying property
    • set(value:any)
    • set(valueCreator:(state)=>value:any)
    • merge(value:any)
    • merge(valueCreator:(state)=>value:any)
  • Modifying collection property
    • add(value:any)
    • add(valueCreator:(state)=>value:any)
    • reject(index:number)
    • reject(rejector:(state)=>boolean)
⚠️ **GitHub.com Fallback** ⚠️