Hoox
English | 简体中文
Use
install
npm install hooxjs -Screate 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)