@createhars/react-arc-store v0.0.0-rc.1

@createhars/react-arc-store

RC版

examples

Component Store

Store

const COMPONENT_STORE_KEY = 'test-component-store'

@StoreInstanceOf({ key: COMPONENT_STORE_KEY, scope: StoreScopes.Component, debug: true })
class ComponentStore {
  inputValue = 'aaa'

  constructor(){}

  updateInputValue(value){
    this.inputValue = value
    this.update()
  }
}

Component

@StoreListenerOf({ keys: [COMPONENT_STORE_KEY] })
class ComponentContainer extends React.Component {
  render() {
    const store = this.storeOf(COMPONENT_STORE_KEY)
    return (
      <div>
        <div>test : {store.inputValue}</div>
        <input type={'text'} onChange={(event) => {store.updateInputValue(event.target.value)}} value={store.inputValue}/>
      </div>
    )
  }
}

Render

function render() {
  return (
    <>
      <ComponentContainer />
      <ComponentContainer />
    </>
  )
}

Singleton Store

Store

const SINGLETON_STORE_KEY = 'test-singleton-store'

@StoreInstanceOf({ key: SINGLETON_STORE_KEY, scope: StoreScopes.Singleton, debug: true })
class SingletonStore {

  inputValue = 'bbb'

  updateInputValue(value){
    this.inputValue = value
    this.update()
  }
}

Component

@StoreListenerOf({ keys: [SINGLETON_STORE_KEY] })
class SingletonContainer1 extends React.Component {

  render() {
    const store = this.storeOf(SINGLETON_STORE_KEY)
    return (
      <div>
        <input type={'text'} onChange={(event) => {store.updateInputValue(event.target.value)}} value={store.inputValue}/>
      </div>
    )
  }
}

@StoreListenerOf({ keys: [SINGLETON_STORE_KEY] })
class SingletonContainer2 extends React.Component {

  handleBlockUpdate(prevStore, nextStore) {
    return false
  }

  render() {
    const store = this.storeOf(SINGLETON_STORE_KEY)
    return (
      <div>test : {store.inputValue}</div>
    )
  }
}

Render

function render() {
  return (
    <>
      <SingletonContainer1 />
      <SingletonContainer2 />
    </>
  )
}