- reset
- set
- delete
- getState
- listernerMiddleware
- useStore
- useSetStoreValue
- useDeleteStoreValue
- useGetAndSet
- useGetAndDelete
- useSetAndDelete
- useStoreValue
- useStoreState
- rawStore
- ConfigListener
- withStore
Resets the state to the given input.
stateObject the new value to reset the state to.
Sets the specified key in the store. This function is equivaluent to the useSetStoreValue hook.
delete the specified key from the store. This function is equivaluent to the useDeleteStoreValue hook.
keystring the property to set in the store
Returns any the global state value of the store
Meta
- deprecated: Use listenerMiddleware
useStore is a React Hook that access a value stored in the application global store. It returns the value, a function to update it (like React.useState) and a function to delete it.
keystring The lookup key to find the saved value in the storedefaultValueT? The value if the value in the store is missing
import {useStore} from 'react-context-hook'
const [username, setUsername, deleteUsername] = useStore('username')
<div>hello {username}</div>
<button onClick={()=> setUsername('my_username')}>set username</button>Returns array an array with length 3:
position 0 - the value of the data in the store.
position 1 - a function setValue to modify the data in the store.
position 2 - a function deleteValue to delete the value from the store.
Returns a function to set or update a variable in the store. You want to use this hook when you just need to modify the store, not read or delete a value from it.
keystring the name of the variable to set in the store
import {useSetStoreValue} from 'react-context-hook'
const setUsername = useSetStoreValue('username')
<button onClick={()=> setUsername('my_username')}>set username</button>Returns Function a function to set a variable in the store with the given name
Returns a function to delete a variable in the store. You want to use this hook when you just need to delete a value in the store, not read or set a value from it.
keystring the name of the variable to set in the store
import {useDeleteStoreValue} from 'react-context-hook'
const deleteUsername = useDeleteStoreValue('username')
<button onClick={()=> deleteUsername()}>set username</button>Returns Function a function to delete a variable in the store with the given name.
This React hook returns an array to read and modify a value in the store:
const [value, setValue] = useGetAndSet('a_lookup_key_in_the_store'). The name of the variable in the arry is arbitrary and you can choose any string you like.
keystring The lookup key to find the saved value in the storedefaultValueT? The default value if missing
import {useGetAndSet} from 'react-context-hook'
const [username, setUsername] = useGetAndSet('username')
<div>hello {username}</div>
<button onClick={()=> setUsername('my_username')}>set username</button>
const [value, setValue] = useGetAndSet('a_lookup_key_in_the_store')Returns array an array with length 2:
position 0 - the value of the data in the store.
position 1 - a function setValue to modify the data in the store.
This React hook returns an array to read and delete a value in the store:
const [value, deleteValue] = useGetAndDelete('a_lookup_key_in_the_store'). The name of the variable in the arry is arbitrary and you can choose any string you like.
keystring The lookup key to find the saved value in the store
import {useGetAndDelete} from 'react-context-hook'
const [username, deleteUsername] = useGetAndDelete('username')
<div>hello {username}</div>
<button onClick={()=> deleteUsername('my_username')}>set username</button>Returns array an array with length 2:
position 0 - the value of the data in the store.
position 1 - a function deleteValue to delete the data in the store.
This React hook returns an array to set and delete a value in the store:
const [setValue, deleteValue] = useGetAndDelete('a_lookup_key_in_the_store'). The name of the variable in the arry is arbitrary and you can choose any string you like.
keystring The lookup key to find the saved value in the store
import {useGetAndDelete} from 'react-context-hook'
const [username, deleteUsername] = useGetAndDelete('username')
<div>hello {username}</div>
<button onClick={()=> deleteUsername('my_username')}>set username</button>Returns array an array with length 2:
position 0 - a function setValue to modify the data in the store.
position 1 - a function deleteValue to delete the data in the store.
keystring the name of the variable / value to be retrieved in the global store.defaultValueT? an optional default value, if the value in the global store is not present.
Returns the whole store value, with all the variables stored in it. Changes to this object will not change the store
import {useStoreState} from 'react-context-hook'
const store = useStoreState()
console.log('the store is', JSON.stringify(store))Returns Record
Returns object An object representing the whole store value in read only mode.
This store can be used outside of React components.
Type: Function
Returns void
WrappedComponentReactElement the component to connect with the storeinitialValueObject? an Object that will be the initial store value, or nothingconfigObject? the custom configuration. If nothing is passed, the default config will be used.config.listenerConfigListener a function that is triggered each time the global state is modified. This function takes these parameters: (state, key, prevValue, nextValue).stateis the value of the new state,keyis the key that changed,prevValueis the old value of the key,nextValuleis the new one.config.loggingboolean defaultfalse- if true it will log changes to console
const initialState = { count: 10 }
const storeConfig = {
listener: (state, key, prevValue, nextValue) => {
console.log(`the key "${key}" changed in the store`)
console.log('the old value is', prevValue)
console.log('the current value is', nextValue)
console.log('the state is', state)
},
logging: process.env.NODE_ENV !== 'production'
}
export default withStore(App, initialState, storeConfig)