Hokx

A state management tool for react hook
Suitable for functional components
123

Installation

$ npm install hokx
$ or
$ yarn add hokx

Employ

New a store directory under src

|- src
|--- store
|----- userInfo.js
|----- mineInfo.js
|----- index.js
|- App.js
|- index.js

• createStore (src/store/index.js)

import {createStore} from 'hokx'

const userInfo = {
    nameSpace: '',  // reducer name
    state: {},      // data
    reducer: {},    // Pure function, modify state
    effects: {}     // side effect
}
const mineInfo = {
    nameSpace: '',
    state: {},
    reducer: {},
    effects: {}
}
const reducer = [userInfo, mineInfo]
const Provider = createStore(reducer)

export default Provider

• mount Provider (src/index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

import Provider from './store'

ReactDOM.render(
    <Provider>
      <App />
    </Provider>,
    document.getElementById('root')
);


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Use

• useStore

import React from 'react'
import {useStore} from 'hokx'

export default (props) => {

    const {state, dispatch} = useStore(nameSpace)

    let handle = () => {
        dispatch({type: '', data: ''})
    }

    return (
        <div onClick={handle}>{JSON.stringify(state)}</div>
    )
}

• store (global) If you want to use state, or execute dispatch, and do not want the component rerender.
  Then you can use the global store

store.[nameSpace]State
store.[nameSpace]Dispatch({type: '', data: ''})

• support local storage
• localStorage
• sessionStorage

const reducer = {
    nameSpace: '',
    localStorage: true,
}
or
const reducer = {
    nameSpace: '',
    sessionStorage: true,
}

Employ

Shopping cart example（coding）

begin

h2

h3

h4

console.log()

• npm init -y
• npm config get registry (https://registry.npm.taobao.org/)
• npm config set registry https://registry.npmjs.org
• npm login
• npm publish

删除包 npm unpublish pkg --force