1.0.8 • Published 5 years ago
hook-gstate v1.0.8
hook-gstate
A global state manager which associate paths to be used as dependecy levels, only updating components which are linked to the path changed
*Important Whenever using path, must be a dot-prop-immutable path. path's example: 'object1.field', 'object1.object2.field', 'array.0'
useRandom.js
// State creating
import { createState, useSub, update } from 'hook-gstate';
// Passing a entry 'random' and it's initial value
createState('random', {
value: Math.random()
});
// Here, update can be used to change multiple values with the style [path, value]
const actions = {
changeValue: function(newValue) {
update({
'random.value': newValue
});
}
}
// keysAndPath represents the state definition the component will like to receive
// an example is {'myRandom': 'random.value'}
export default function useRandom(keysAndPath) {
return [
useSub('random', keysAndPath),
actions
]
}
MyComponent.js
import React, { useCallback } from 'react';
import useRandom from './useRandom';
function MyComponent(props) {
const [{myRandom}, {changeValue}] = useRandom({'myRandom': 'value'});
const handleChange = useCallback(function() { changeValue(Math.random()); }, [changeValue]);
return (
<div>
My random value: {myRandom}
<button onClick={handleChange}>Change random value</button>
</div>
);
}
export default MyComponent;