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')
)
-
createStore(initialState)
-
<Provider {store:Store, mapStoreToProps:(store)=>{state, action}}>
- provides props
{store, action}
for child react component.
- supports mapStoreToProps
- default
(store)=>{state, action}
-
getState()
-
getAction()
- returns
action:ActionProxy
subscribe(callback:(currentState)=>any)
- 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'}
]
}
**/
- 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)