0.0.0-zxcv • Published 3 years ago
ltw-test2 v0.0.0-zxcv
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