wuomzfx/hoox

Functional react state management base on hooks

Hoox

English | 简体中文

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)

hoox's Issues

全局状态错乱问题

有一个非常严重的问题：createHoox的返回结果（比如getHoox, useHoox, createContainer）与唯一一个组件实例绑定。

比如const Container = createContainer(Counter)
那么 Container只能用在一个地方！

举个例子，如果在topbar里渲染一次Container，在menu里渲染一次Container。那么当我们调用setHoox的时候，究竟是哪个组件实例的state被修改了？

请问，您是如何使用这个插件的？

在公众号看到这个插件，有一个疑问，想请教一下。

如果项目已经使用 typescript，那么是直接引用 src 里的文件吗？
如果项目没有使用 typescript，是引用打包之后的文件吗？

想请教一下，您这边是如何在项目中使用的。
能否做到像 react 一样，生成 *.d.ts，让没有使用 typescript 的项目也可以享用类型提示。

Provider 组件中 useMemo 的含义

useMemo(() => {
  setHoox = patch => setState(prevState => Object.assign(
    {},
    prevState,
    patch instanceof Function ? patch(prevState) : patch,
  ));
  resetHoox = setState;
}, []);

你好，在阅读源码的时候有个疑惑，就是 Provider 组件的实现中，有这个使用 useMemo 的操作，这里使用 useMemo 的含义是什么呢，希望作者能解答一下。