Hoox

Use

install

npm install hooxjs -S

create some store

// counterStore.js
import createHoox from 'hooxjs'

const state = {
  count: 1
}

export const { getHoox, useHoox, createContainer } = createHoox(state)

// some action
export const up = () => {
  const [hooxState, setHoox] = getHoox()
  return setHoox({
    count: hooxState.count + 1
  })
}

// some computed state
export const useDoubleCount = () => {
  const [hooxState] = useHoox()
  return hooxState.count * 2
}

use store

import React from 'react'
import ReactDom from 'react-dom'
import { useHoox, useDoubleCount, up } from './counterStore'

function Child() {
  const doubleCount = useDoubleCount()
  return <div>{doubleCount}</div>
}

function Counter() {
  const [hooxState] = useHoox()
  return (
    <div>
      <div>{hooxState.count}</div>
      <div onClick={() => up()} />
      <Child />
    </div>
  )
}

const Container = createContainer(Counter)

ReactDom.render(<Container />, document.getElementById('#root'))

API

createHoox

import createHoox from 'hooxjs'

const state = { count: 0 }

export const {
  Provider,
  getHoox,
  useHoox,
  setHoox,
  resetHoox,
  createContainer
} = createHoox(state)

Provider

hooxState will combine the initialState of Provider props

function App() {
  return <Provider initialState={{ count: 1 }}>
    <YourFunctionComponent>
  </Provider>
}

createContainer

suger of Provider

hooxState will combine the initialState of createContainer args[1]

const App = createContainer(YourFunctionComponent, { count: 2 })

useHoox

using this api, build your hook

export const useDoubleCount = () => {
  const [hooxState, setHoox, resetHoox] = useHoox()
  const { count } = hooxState
  return [count * 2, () => setHoox({ count: count * 2 })]
}

getHoox

using this api, build your action

export const up = () => {
  const [hooxState, setHoox, resetHoox] = getHoox()
  return setHoox({
    count: hooxState.count + 1
  })
}

setHoox

it behaves like setState of class Components, but no callback

// get setHoox from createHoox(state)
const { setHoox } = createHoox({ count: 0 })
export const updateCount = newCount => {
  return setHoox({
    count: newCount
  })
}

// get setHoox from getHoox() or useHoox()
export const updateWithRecordOld = newCount => {
  const [oldState, setHoox] = getHoox()
  return setHoox({
    count: newCount,
    oldCount: oldState.count
  })
}

// aonther way to use oldState
export const up = () => {
  const [, setHoox] = getHoox()
  return setHoox(oldState => ({
    count: oldState.count + 1
  }))
}

resetHoox

it behaves like setState of useState hook

// get resetHoox from createHoox(state)
const { resetHoox } = createHoox({ count: 0 })
export const reset = () => {
  return resetHoox({ newCount: 0 })
}

// get resetHoox from getHoox() or useHoox()
export const reset = () => {
  const [, , resetHoox] = getHoox()
  return resetHoox({ newCount: 0 })
}

connect

map hooxState to props.

function component

const { connect } = createHoox({ count: 0 })

const Counter = ({ count }) => {
  return <div>{count}</div>
}

export default connect(state => ({ count: state.count }))(Counter)

class component

// jsx
import React from 'react'

const { connect } = createHoox({ count: 0 })

@connect(state => ({ count: state.count }))
export default class Counter extends React.PureComponent {
  render() {
    return <div>{this.props.count}</div>
  }
}

PS: Decorator syntax of connect is not supported in TS.

// tsx
import React from 'react'

const { connect } = createHoox({ count: 0 })

class Counter extends React.PureComponent<{ count: number }> {
  render() {
    return <div>{this.props.count}</div>
  }
}

export default connect(state => ({ count: state.count }))(Counter)

cute-panda/hoox