react-rock
Build powerful React apps that scale from hundreds to tens of thousands of records and remain fast ⚡️. react-rock is a powerfull state management lib for React. It's very simple and easy to manage your React App.
Installation
To use React Rock with your React app, install it as a dependency:
npm install --save react-rockInitial the store
import {createStore} from 'react-rock'
const config = {
tables: ['Posts', 'Users'],
keys: {name: 'val'},
methods: {}
}
const App = () => {
return (
<div>
....
</div>
)
}
ReactDOM.render(createStore(App), document.getElementById('root'))React Rock core concept
useStore
import {withStore, useStore} from 'react-rock'
// custom action handler
const createPost = () => {
const store = useStore()
store.insertPosts({})
}
const Comp = ({store}) => {
const posts = store.getAllPosts()
return (
<div>
<button onClick={() => store.insertPosts({})}>Insert from Component</button>
<button onClick={createPost}>Insert from outside</button>
</div>
)
}
export default withStore(Comp)withStore
import {withStore, useStore} from 'react-rock'
// custom action handler
const createPost = () => {
const store = useStore()
store.insertPosts({})
}
const PostList = ({store, isPostTableChange, ...ownProps}) => {
const posts = store.getAllPosts()
return (
<div>
<button onClick={() => store.insertPosts({})}>Insert from Component</button>
<button onClick={createPost}>Insert from outside</button>
</div>
)
}
export default withStore(PostList, ({store, ...ownProps}) => {
return {
isPostTableChange: store.observePosts()
}
}useConfig & storeID
useConfig - get the store config storeID - get the store unique ID
import {useConfig, storeID} from 'react-rock'
const Comp = () => {
const config = useConfig()
const store_id = storeID()
return (
<div>
</div>
)
}Config Parames
{
// Assign the store tables
tables: ['Posts', 'Users'],
// call every store update
onUpdate: () => {
},
onRead: () => {},
// Custom Keys
keys: {
user_option: 'user_option_key'
}
// Custom methods
methods: {
// we can use this method in the component
// store.getUserById(user_id)
getUserById: (id) => {
const store = useStore()
const getUser = store.getUsers({userId: id})
if(getUser){
return getUser
}
}
}
}CRUD
Insert
store.inserPosts({title: '', content: ''})
store.insertManyPosts([{}, {}])
store.insertAfterPosts({title: '', content: ''}, targetIndex)Update
store.updatePosts({title: 'new title'}, where)
store.updateAllPosts({title: 'new title'}) Delete
store.deletePosts(where) Read
store.getPosts(where)
store.getAllPosts()Others
store.movePosts(oldIndex, newIndex)
store.getAllPosts()
store.countPosts()
store.getPostsIndex(_id)Where Expression
Four type data we can pass in the where condition
String|row_id
when insert a row then automatically create a unique row id with _id: col If you pass string value then it will compare with row id to read the data get the row with row id (_id)
Object
get the rows match with object {title: 'new title'}
Number
number for get the row with the index
jsonpath Expression
https://goessner.net/articles/JsonPath/ we can read the data with the jsonpath query you must have to use the first charter @ example: '@.title' example: '@.status === "publish" && @.view_count > 100'
Row Predefine props
{
_id: uniqueId,
observe: () => ({created: date, updated: date}), //
}Store Meta data
// Add or update meta data with the key
store.addMeta(key, {})
store.addMetas({
key: val,
key: val,
})
const [meta, setMeta] = store.useMeta(key, def)
// get meta data with the key
store.getMeta(key)
store.getMetas([key, key])
store.getAllMeta()
store.getMetaInfo(key)
store.observeMeta(key)
// delete meta data
store.deleteMeta(key)
store.deleteMetas([key, key])
store.deleteAllMeta()
Store Core Table Methods
// Create new Table
store.createTable(tablename)
// Check table is exists
store.hasTable(tablename)
// delete table
store.dropTable(tablename)
// read the table info
store.tableInfo(tablename)
// read the create and update time from the table
store.tableInfo(tablename)
// read the table update info
store.observeTable(tablename)Global Methods
// get full state
store.getState()
store.getKeys('keyname') // read the key from the config.keys
// get store info
store.storeInfo()
Custom methods from config
store.getUserById()Action
How action work
// action.js
import {useStore} from 'react-rock'
export const clickHandle = () => {
const store = useStore()
// Now we can do CRUD here
}
// button.js
import {useStore} from 'react-rock'
import {clickHandle} from 'action'
const Button = () => {
return <button onClick={clickHandle}>Insert</button>
}
Utilities Functions
import {
uid, // generate unique id
is_object,
is_string,
is_array,
in_array,
is_number,
is_callback,
is_callable,
is_define,
is_null,
is_empty,
getVal,
} from 'react-rock'
is_obeject(obj, def) // return obj or def
is_string(str, def) // return true or def
is_array(arr, def) // return arr or def
in_array(val, arr, def) // return true or def
is_number(num, def) // return true or def
is_callback(cb, def) // return cb or def
is_callable(cb, def) // return cb or def
is_define(val, def) // return val or def
is_null(val, def) // return true or def
getVal(obj, key, def) // return val or def License
MIT © devnax
