notsunohito / orex

Configureless state container for JavaScript apps.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Orex

Orex is a configureless state container for JavaScript apps.

  • Configureless.
  • Easy to learn.
  • Focus on synchronous complicated form UI, not for SPA.(as of now)

Motivation

I think react must be written as SFC(Stateless functional components) in general. But writing SFC enforces using some state container which annoying us to setup.

Yes, it mentions Redux. Redux is a great framework. But it's too complex to write just a UI which is not a SPA, especially if it has many forms. So I wrote orex to solve those issues.

If you see Getting Started, you'll find that helloworld example is written in about 20 lines. If you just want to learn React or writing synchronous complicated form UI,

You Might Not Need Redux. You Might Need Orex.

Installation

$ npm install --save orex

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

wiki

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()
  • subscribe(callback:(currentState)=>any)

Examples

License

MIT

About

Configureless state container for JavaScript apps.

License:MIT License


Languages

Language:JavaScript 100.0%