feat: created selectState and createState API

gulpfile.js

@@ -7,5 +7,6 @@ gulp.task('minify', () => {
   return gulp.src('src/**/*.js')
     .pipe(babel())
     .pipe(uglify())
+    .pipe(rename("index.min.js"))
     .pipe(gulp.dest('dist'))
 });

package.json

@@ -1,8 +1,8 @@
 {
   "name": "jedisdb",
-  "version": "0.1.6",
+  "version": "0.2.4",
   "description": "React key-value state management solution, accessible in all components",
-  "main": "dist/index.js",
+  "main": "dist/index.min.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "gulp minify"
@@ -31,7 +31,8 @@
     "gulp-babel": "^8.0.0",
     "gulp-uglify": "^3.0.2",
     "react": "^16.6.1",
-    "react-dom": "^16.6.3"
+    "react-dom": "^16.6.3",
+    "gulp-rename": "^2.0.0"
   },
   "keywords": [
     "react",

readme.md

@@ -1,16 +1,15 @@
 <h1 align="center">jedisdb</h1>
 <h3 align="center">redis like key-value state management solution for React</h3>
-<p align="center">Reactive, Redux alternative, Simple and powerfull global state management system, accessible in all components</p>
+<p align="center">Reactive. Redux alternative. Simple and powerful global state management system, accessible through every component.</p>
 
 <h1>Philosophy</h1>
 
-jedisdb is a wrapper on react useState hook, that makes it accessible through all the components without passing in the components, so no need to create stores, actions, or dispatchers.
-
+jedisdb is a wrapper for React.JS useState hook. jedisdb makes the hook accessible in every component without the need to explicity pass it down or to create stores, actions, and dispatchers.
 
 <h1>Features 📋</h1>
 
 1. Reactive 
-2. State accessable in all components
+2. State accessable through every components
 3. no reducer, no action needed
 4. small bundle size
 
@@ -28,9 +27,9 @@ import React from 'react'
 import useJedis from 'jedisdb'
 const Counter = () =>{
 /*
-if a key is not present in jedis, useJedis('myKey', fallbackValue) will create create that key in jedis and then it will return that object,
-if key is present it will simply return that key
-if we don't pass fallbackValue it will create jedis object of value undefined 
+if a key is not present in jedis, useJedis('myKey', fallbackValue) will create create that key in jedisdb and then it will return that jedis object,
+if key is present it will simply return that jedis object
+if we don't pass fallbackValue it will create jedis object with value undefined 
 */
   const counter = useJedis('counter', 0)
   return (
@@ -48,3 +47,61 @@ Counter [Codesandbox](https://codesandbox.io/s/usejedis-demo1-owozg?file=/src/Ap
 
 Shopping Cart [Codesandbox](https://codesandbox.io/s/shopping-cart-usejedis-qbgwq?file=/src/App.js).
 
+>`useJedis` returns a react hook so it can only used in react functional components,<br><br>
+`selectState` has no side effects, it can be used anywhere,<br>
+`createState` creates jedis object without any side effects. <br>
+demo: Accessing value in JS funciton [Codesandbox](https://codesandbox.io/s/usejedis-demo2-pdfsm?file=/src/myjsfunction.js).
+
+<h3>Best Practice</h3>
+
+use `createState` to create jedis object and then use `useJedis` to access it, is considered best practice
+
+```javascript
+//myGlobalHook.js
+//create jedis object
+import {createState} from 'jedisdb'
+createState({
+    theme: 'dark',
+    uesrLevel: 'admin',
+    counter: 7
+})
+```
+
+```javascript
+//app.js
+//import jedis object in app
+import React from 'react';
+import Main from './main';
+require('./myGlobalHook')
+function App() {
+  return (
+      <Main />
+  );
+}
+export default App;
+```
+
+```javascript
+//counter.js
+//access anywhere
+import React from 'react';
+import useJedis from "jedisdb";
+
+function Counter() {
+  const counter = useJedis('counter') //no need to pass fallback value
+  return (
+      <>
+        {counter.state}
+        <button onClick={()=>{ counter.state++ }}>+</button>
+      </>
+  );
+}
+export default Counter;
+```
+demo: [Codesandbox](https://codesandbox.io/s/usejedis-practice-lxrhs)
+
+<br>
+
+# 🤝 Contributing
+
+Contributions, issues and feature requests are welcome! Feel free to check [issues page](https://github.com/alhaqhassan/jedisdb/issues).

src/index.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-let myProxy = {
+let jedisProxy = {
   get(target, key) {
     if (key === 'state') {
       return target.get();
@@ -38,7 +38,27 @@ const useJedis = (key, defaultValue) =>{
       jedisObj.setters.map(setter=> setter(value));
       jedisObj.state = value;
     }
-  }, myProxy)
+  }, jedisProxy)
 }
 
+export const createState = (defaultValue) =>{
+  if (!window.useJedisStateOBJ) //create jedisObject, if not exist
+    window.useJedisStateOBJ = {};
+    for (const [key, value] of Object.entries(defaultValue)) {
+      if(!window.useJedisStateOBJ[key])//create key, if not exist
+      window.useJedisStateOBJ[key] = { state: value, setters: [] }
+    }
+
+}
+export const selectState = (key) => {
+  if(!window.useJedisStateOBJ[key]?.state)
+  return ;
+  return new Proxy({
+    get: ()=> window.useJedisStateOBJ[key].state,
+    set: (value) => {
+      window.useJedisStateOBJ[key].setters.map(setter=> setter(value));
+      window.useJedisStateOBJ[key].state = value;
+    }
+  }, jedisProxy)
+}
 export default useJedis