react-2store v1.1.1

Simply manage the React application data system

Methods

import {Provider, useStore, getStore, Context} from 'react-2store'

store.insert('users', {}) // insert new data
store.update('users', {key: value} | index) // update existing data
store.updateAll('users', data: {}) // update all data
store.delete('users', where:{key: value}) // delete data with value
store.deleteAll('users') // delete all data
store.get('users', {key: value_prefix}) // read data with value
store.getAll('users') // read all data
store.find('users', {key: value_prefix}) // search data with matching of the value

How to Use

cls-comp.js

import {useStore, getStore} from 'react-2store'
class Section extends React.Component{
 
    render(){
        const store = getStore()
        const users = store.find('users')
        return (
            <h1>{users.length}</h1>
        )
    }
}
export default useStore(Section)

fn-comp.js

import {useStore} from 'react-2store'
const Child = () => {
    const store = useStore()
    const users = store.find('users')
    return (
        <h3>{users.length}</h3>
    )
}
export default Child

Action example

action.js

import {getStore} from 'react-2store'

export const inserData = (data) => {
    const store = getStore()
    // insert data like this
    store.insert('users', {
        name: 'hello',
        email: 'example@mail.com',
    })
}

export const update = (ref) =>{
    store.update('users', {
        name: ref.current.value,
    }, 2)
}

export const deleteData = (ref) =>{
    store.delete('users', {_id: ref.current.value})
}

export const get = (ref) =>{
    const users = store.get('users', {_id: ref.current.value, name: "anithing"})
}

export const find = (ref) =>{
    const users = store.find('users', {name: ref.current.value})
}

button-comp.js

import {useStore} from 'react-2store'
import {inserData, update, deleteData, get, find} from 'action'

const Button = () => {
    const ref   = React.useRef()
    const store = useStore()
    
    return (
        <>
            <input ref={ref} />
            <button onClick={e=>inserData(store)}>Insert</button>
            <button onClick={e=> update(ref)}>update</button>
            <button onClick={e=> deleteData(ref)}>delete</button>
            <button onClick={e=> get(ref)}>get</button>
            <button onClick={e=> find(ref)}>find</button>
        </>
    )
}
export default Button

app.js

import {Provider} from 'react-2store'
import Section from 'cls-comp'
import Child from 'fn-comp'

const App = () =>{
    return (
        <Provider>
            <Section/>
            <Child/>
            <Button/>
        </Provider>
    )
}

export default App