{"_id":"@bilmapay/react-flux-storage","_rev":"2-58bd29ced8d0275ea289520be05fe506","name":"@bilmapay/react-flux-storage","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@bilmapay/react-flux-storage","version":"1.0.1","description":"A simple react JS/Native state management library for anyone looking to use a state management library on his project to effectively manage global state.","main":"lib/index.js","types":"lib/index.d.ts","directories":{"lib":"lib"},"devDependencies":{"@babel/core":"^7.18.0","@babel/preset-react":"^7.17.12","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-actions":"^6.5.4","@storybook/addon-essentials":"^6.5.4","@storybook/addon-interactions":"^6.5.4","@storybook/addon-links":"^6.5.4","@storybook/builder-webpack4":"^6.5.4","@storybook/manager-webpack4":"^6.5.4","@storybook/react":"^6.5.4","@storybook/testing-library":"^0.0.11","babel-loader":"^8.2.5","react":"^18.1.0","react-dom":"^18.1.0","react-query":"^3.39.0","typescript":"^4.8.4","rollup":"^2.74.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2"},"scripts":{"build":"tsc","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"repository":{"type":"git","url":"git+https://github.com/obipascal/react-currency-symbols.git"},"keywords":["React Native Currency Symbols","React Currency Symbols","Currency Symbols","Currency","Symbols"],"author":{"name":"Obi Pascal Banjuare"},"license":"MIT","bugs":{"url":"https://github.com/obipascal/react-currency-symbols/issues"},"homepage":"https://github.com/obipascal/react-currency-symbols#readme","dependencies":{"@types/jest":"^29.2.2","@types/node":"^18.11.9","@types/react":"^18.0.25","@types/react-dom":"^18.0.8"},"gitHead":"337f8f51e14f118bed912935b0074179da7b6c93","_id":"@bilmapay/react-flux-storage@1.0.1","_nodeVersion":"16.15.1","_npmVersion":"8.13.2","dist":{"integrity":"sha512-poPJfsWta7+d159P4RWssgXEougMwEt8f9D7Y2I6fGjeXgh1NDgL+nOtwGw5t+NoVGc7qZqHnXWBqwlhOlG64w==","shasum":"e0fde1569b833a8a639341d5462a0602b63417f3","tarball":"https://registry.npmjs.org/@bilmapay/react-flux-storage/-/react-flux-storage-1.0.1.tgz","fileCount":31,"unpackedSize":24148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICelaZXV/WKSEzESwQa28gDtX3ZnFjlmr/PKv4cp6m7tAiEA6SP12jV6NlR6p2821im1q/IpWV5yoJLM59/CybM778s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb6evACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3EQ//eFgS9RXNqyxmVeRSTmj8ueLxSB66+V+R6sAYiz/HgwPftB9S\r\nfwW45yIwyoHymhlqg3Kg8vmz0BmfnBphhVknq2SovXjoncxRhM7AJR+sT+sr\r\n3AWnWbdqbFdndhaJFBsWolrYiQfVWA09cC5AzYMnZ1l+c2KEAr7khK/IMS6X\r\nrqr7QcCTXplE5VsFTFt0m0klc79/hCkx18dSUxgiNve1FYyhIZZyQ6SCsd/H\r\njGhcX2zub4D4hg2Xamb9iCzf4Jx3rQ9+90duY9moAyAY9INBpvWrhc/M2stM\r\nM/d7U830QBqIoF7l3RvgHxd6M1qPih3s83eTApZ699I9KcaL9G5LXTWh+H+K\r\nemc4XCCIpHLhd6Zr46x1+6wnfyMIHJC/PxywLrtABhBREu5xmw7CoaMz2lhh\r\nrwo6iUWzjU1xRYRAt1wSVlCSyv0IV2N54M0NaU/8jutUlsYLXeiThbNWL28j\r\nlC9CLIe4cp558s9V6yt7rRG5ijlO+wFhOzFa1+YwDoGuQdkEd1SGmW2xV5q7\r\nU5cEjSUE79K4cVE6udsIEjpqB5KdYRLa8SC3DeoYM5/gOmTlI5/fuSfh18VT\r\nBj+wH31Rwairs+UuaqYSqEWb2CXU8QMFS0zrrNeZnSuU8TCI3Zpj0uqCqSP7\r\nCkCMDXObKcUv1JF4O5ckrGDwI/mKtaTZuQU=\r\n=ad/m\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bilmapay","email":"my.bilmapay@gmail.com"},"maintainers":[{"name":"bilmapay","email":"my.bilmapay@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flux-storage_1.0.1_1668261807409_0.9128090794507906"},"_hasShrinkwrap":false},"1.0.2":{"name":"@bilmapay/react-flux-storage","version":"1.0.2","description":"A simple react JS/Native state management library for anyone looking to use a state management library on his project to effectively manage global state.","main":"lib/index.js","types":"lib/index.d.ts","devDependencies":{"@babel/core":"^7.18.0","@babel/preset-react":"^7.17.12","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-actions":"^6.5.4","@storybook/addon-essentials":"^6.5.4","@storybook/addon-interactions":"^6.5.4","@storybook/addon-links":"^6.5.4","@storybook/builder-webpack4":"^6.5.4","@storybook/manager-webpack4":"^6.5.4","@storybook/react":"^6.5.4","@storybook/testing-library":"^0.0.11","babel-loader":"^8.2.5","react":"^18.1.0","react-dom":"^18.1.0","react-query":"^3.39.0","typescript":"^4.8.4","rollup":"^2.74.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2"},"scripts":{"build":"tsc","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","publish":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/obipascal/react-currency-symbols.git"},"keywords":["React Native Currency Symbols","React Currency Symbols","Currency Symbols","Currency","Symbols"],"author":{"name":"Obi Pascal Banjuare"},"license":"MIT","bugs":{"url":"https://github.com/obipascal/react-currency-symbols/issues"},"homepage":"https://github.com/obipascal/react-currency-symbols#readme","dependencies":{"@types/jest":"^29.2.2","@types/node":"^18.11.9","@types/react":"^18.0.25","@types/react-dom":"^18.0.8"},"_id":"@bilmapay/react-flux-storage@1.0.2","dist":{"shasum":"bda7d91dfc67bf0e191597d2f304e51def833691","integrity":"sha512-TOprHahAwsrq7a1JPRNp9z3EejuF6ftImmKKZ0e2N8rc4AM1nGysfU/L/hlzmFJdrqfDr+fv0OZoQ+X6M25heg==","tarball":"https://registry.npmjs.org/@bilmapay/react-flux-storage/-/react-flux-storage-1.0.2.tgz","fileCount":46,"unpackedSize":24194,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyV/OU4Ql8Hii5kTG52Zg7a8F95tAoDrl0M2vQ9TkgOAiEAjUULs8wE+sN6MqtKG+xVfPThf+/H+2QGU3JGiql+CL8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjciMwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2vhAAlx1IblkvkbxcG1/Nx5eo6WI+m4El2cT6XtogrJQpBHvOwknx\r\nsW38YGeMJXUK5mQLuyIQm5xQJvzbNtELnM7YvnDIq7guw/Jw2cA3rVhipT5o\r\n1NMsUuIM8mQHIn+6ApHmyPtLaqdoyoccMexLna3e3nUy61rmmnHyE0DaDbKB\r\nsFTq+f7GOQzES1NgP/e6gjc7lpcR84zk6COJ5tNRpyP9GqRL2Pa4HoI/SK4O\r\n10WooqONTbU4/2po6g29M8q39+/PX9o/7xhtcxqwGs/9s2Bw0vQN0I+CRoF8\r\nSHTLG6JuDzQ/iGNfuFvxfCUSQPmebFWQDHySXKz0r+6hQMby8E3BgQgXxcmX\r\nNt4LRa2ttfLdAS+QjC6ZfTzoL/yBANHSyCTPhChOM3XXBAz47i5P1T4+kJzR\r\nJ7lmkTXqeNx56j3cTQt11Yk8omYDcWYUL3jU0oklzjFC32WBWKxoy62YXwcn\r\ncEkQmw9sg0ppts3SG8nGpyNqukxrYKL0v/zFrn1TqE9CiE/ApiOTk6ho1KN2\r\nPLEpPuKN6RpP5akeE3uXsZcZRynyId5wN3+AFA8Getb+b4BUopJQOMQ+bhu4\r\nl2WLjyNX6WL7AbLGOm3x8PysOIwdON1GhtkTZcUFVVd5O7egk6Qetfz55Bbn\r\nsJTMLd5tvLoStKNesG1W/Hfkl1WPrJg6Ro0=\r\n=lwUZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bilmapay","email":"my.bilmapay@gmail.com"},"directories":{},"maintainers":[{"name":"bilmapay","email":"my.bilmapay@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flux-storage_1.0.2_1668424495947_0.04267142819963543"},"_hasShrinkwrap":false},"1.0.3":{"name":"@bilmapay/react-flux-storage","version":"1.0.3","description":"A simple react JS/Native state management library for anyone looking to use a state management library on his project to effectively manage global state.","main":"lib/index.js","types":"lib/index.d.ts","devDependencies":{"@babel/core":"^7.18.0","@babel/preset-react":"^7.17.12","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-actions":"^6.5.4","@storybook/addon-essentials":"^6.5.4","@storybook/addon-interactions":"^6.5.4","@storybook/addon-links":"^6.5.4","@storybook/builder-webpack4":"^6.5.4","@storybook/manager-webpack4":"^6.5.4","@storybook/react":"^6.5.4","@storybook/testing-library":"^0.0.11","babel-loader":"^8.2.5","react":"^18.1.0","react-dom":"^18.1.0","react-query":"^3.39.0","rollup":"^2.74.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","typescript":"^4.8.4"},"scripts":{"build":"tsc","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","publish":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/obipascal/react-currency-symbols.git"},"keywords":["React Native Currency Symbols","React Currency Symbols","Currency Symbols","Currency","Symbols"],"author":{"name":"Obi Pascal Banjuare"},"license":"MIT","bugs":{"url":"https://github.com/obipascal/react-currency-symbols/issues"},"homepage":"https://github.com/obipascal/react-currency-symbols#readme","dependencies":{"@types/jest":"^29.2.2","@types/node":"^18.11.9","@types/react":"^18.0.25","@types/react-dom":"^18.0.8"},"_id":"@bilmapay/react-flux-storage@1.0.3","dist":{"shasum":"d9a88a13155f8b59649915c5332f43f3e622f84e","integrity":"sha512-IDq7Mmi5Nf0UWlGxwrQjAV3FQxELUqvOPzWJykuy9yE3jamAfsbxsUYpxDhUr6DAWAIiSod43KKBKjb1QWmjVQ==","tarball":"https://registry.npmjs.org/@bilmapay/react-flux-storage/-/react-flux-storage-1.0.3.tgz","fileCount":46,"unpackedSize":24198,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuRWBn+ohN3dTNu7j62P9jGv+8Y/bw1m8BiFHflSVzagIgfn5gQ01YY85C0tvZjv8XyrO+RY1cmRiriF/l4X586MU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcie7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqktA//fN0EzkY7NYFjOOAbRk/3JB3LiugYCbeQVRPdqQMyKyAaHWzu\r\nPIC3gyB6XInJNIbfNUaPAMW6kzzQxmxdsxQdNe4HQ7ap3GsnrGSFwf0B8TC0\r\nvARtiITfAtqbX9DF5n6hYa6v1iww7WWiqSQaIotpyjb4WZ1b6QXPz5RnITP0\r\nw9Wyb3exdE1xVomDw0yqt0C4gikSi4tpkpd+xYHczRbetPo50MoTA7a+E2m5\r\nbq5hhmS2bFRexMhyVWbqExbGQEbtYSyNLkiRNPSR5LVdWLUMJRYuP0QTfpDN\r\nkyIlEgezWzRjRihojsb5FpYK0nuT0C/CKwOVdpsEZMqoefb3rO2oxI6MdbOA\r\nZTo1bNB1h9zW5kffkCTnpervDTFEwVOzad6dt3xMetJDPEuD9wHeJ31c3gGD\r\noSrjn2XB0sVuxTiJbquXwVaXZP3m5c0ysztCGkllZg6SuonKQBDhSEqqd4RG\r\n9egtABlxUG2Cz0XgwOqLxC4/4o4ajfq5sMFehmFcpRhxSw+2kaRtJHiYm53/\r\namsmacMJqHxMXuT8E2iRegV1rILIx+/cWcEQyZHAEbCRsZkkhDu9BJvOv9op\r\n8NbvPlaHh38QpJfXcnOIuFCxgZSPdY8YMZ4dpqT7DZibxDOGMXHsOF48NzkL\r\nKA3aXB+YhRD0XuwNMQP+6gODt8QNhHnXTZo=\r\n=Wx2/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bilmapay","email":"my.bilmapay@gmail.com"},"directories":{},"maintainers":[{"name":"bilmapay","email":"my.bilmapay@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flux-storage_1.0.3_1668425659455_0.9525928732458633"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-12T14:03:27.351Z","1.0.1":"2022-11-12T14:03:27.546Z","modified":"2022-11-14T11:34:19.676Z","1.0.2":"2022-11-14T11:14:56.113Z","1.0.3":"2022-11-14T11:34:19.594Z"},"maintainers":[{"name":"bilmapay","email":"my.bilmapay@gmail.com"}],"description":"A simple react JS/Native state management library for anyone looking to use a state management library on his project to effectively manage global state.","homepage":"https://github.com/obipascal/react-currency-symbols#readme","keywords":["React Native Currency Symbols","React Currency Symbols","Currency Symbols","Currency","Symbols"],"repository":{"type":"git","url":"git+https://github.com/obipascal/react-currency-symbols.git"},"author":{"name":"Obi Pascal Banjuare"},"bugs":{"url":"https://github.com/obipascal/react-currency-symbols/issues"},"license":"MIT","readme":"# React Flux Storage\n\nA simple react JS/Native state management library for anyone looking to use a state management library on his project to effectively manage global state. [here](https://reactjs.org/blog/2014/05/06/flux.html)\n\n## How To Install the Library\n\n## `npm install @bilmapay/react-flux-storage`\n\n### Or\n\n`yarn add @bilmapay/react-flux-storage`\n\nNow this library is base on:\n\n1. Actions\n2. Constants\n3. Stores and\n4. Middleware (Think of this as action handles that takes the action handle it and return new state)\n\nTo get started with react flus lib first lets organize our project structure. As you can see from the image below the config folder (which can be renamed to anything say's flus but for this tutorial i will be using config)\ncontains 4-folders namely:\n\n1. Actions\n2. Constants\n3. Middlewares\n4. Stores\n\n![image](https://user-images.githubusercontent.com/30573300/170140874-c4e05321-e5de-4ee7-8dd4-13eb09ad39eb.png \"Project Structure\")\n\nNow let's break things down for clearity\n\n## Actions\n\nThe action folder basically contains a javascript object that returns a key-value parse of:\n\n1. Action Key -> which serve as the constant value\n2. Action handlers -> which are function return by middleware (As said earlier there're like handles that accept the current app state and action dispatched to be handle)\n   For example:\n\n**_src/flus/actions/app.actions.js_**\n\n```js\nimport Middleware from \"./../Middlewares\"\n\n/**\n * Application actions\n */\nexport const appActions = {\n\t/* handle drawer addition */\n\t\"app/stores/create-dynamic-store\": Middleware.app.createDynamicStore,\n\t\"app/events/emit-dynamic-event\": Middleware.app.emitDynamicEvent,\n\t\"app/update-name\": Middleware.app.updateAppName\n}\n```\n\n## Constants\n\nConstants are just basically strings exported to while thier values are used as the action key.\n\n```js\nexport const UPDATE_APPNAME = \"app/update-name\"\n\nexport const DS_STORE = \"app/stores/create-dynamic-store\"\nexport const DE_EVENT = \"app/events/emit-dynamic-event\"\n```\n\n## Middlewares\n\nMiddlewares are the the core feature component is this library as their handle state logic for the application alot can really be done in the middlewares. They basically computes\nthe state and return a new object of fresh data which updateds the entire app depending on the components that subscribe for the update by using the `js useFlusStore()` hook\nThe middlewares are javascript objects where the name of the middleware is the key while the value is a function\n\nfor example:\n**_src/flus/middlewares/app.middleware.js_**\n\n```js\n/* update application name */\nexport const appMiddlewares = {\n\t/** App middleware group */\n\tapp: {\n\t\tupdateAppName(state, payload) {\n\t\t\tstate.app.name = payload?.appname\n\n\t\t\treturn { ...state }\n\t\t}\n\t}\n}\n```\n\n## Stores\n\nStores are normal javascript objects that contains key-value parse for example:\n\n```js\nexport const AppStore = {\n\tapp: {\n\t\tname: \"flus State Manager\",\n\t\tversion: \"1.0.0\",\n\t\tauth: \"Obi Pascal Banjuare\"\n\t}\n}\n```\n\nFinally let's but things together and build a functional application with react-flus library and see how to register actions and stores then use the flus hooks to\nsubscribe to update for a particular react component.\n\n## Step 1 - App.js\n\n```js\nimport { appActions } from \"./../config/actions/app.actions\"\nimport { AppStores } from \"./../config/stores\"\nimport FlusAppServiceProvider from \"./../flus/FlusAppServiceProvider\"\nimport React from \"react\"\nimport Hello from \"./Hello\"\n\nexport default function App() {\n\treturn (\n\t\t<FlusAppServiceProvider stores={AppStores} actions={appActions}>\n\t\t\t<Hello />\n\t\t</FlusAppServiceProvider>\n\t)\n}\n```\n\n## step 2 - Hello.js\n\n```js\nimport { FLUSDYNAMIC_STORE, useFlusDispatcher, useFlusStores } from \"./../flus\"\nimport React from \"react\"\nimport { UPDATE_APPNAME } from \"./../config/constants/app.const\"\n\nconst listItems = [\n\t{\n\t\tid: 1,\n\t\tname: \"First Name\",\n\t\tvalue: \"Obi\"\n\t},\n\t{\n\t\tid: 2,\n\t\tname: \"Last Name\",\n\t\tvalue: \"Pascal\"\n\t},\n\t{\n\t\tid: 3,\n\t\tname: \"Age\",\n\t\tvalue: 22\n\t},\n\n\t{\n\t\tid: 4,\n\t\tname: \"Email\",\n\t\tvalue: \"pascalobi83@gmail.com\"\n\t},\n\t{\n\t\tid: 5,\n\t\tname: \"Contact\",\n\t\tvalue: \"09125256272\"\n\t}\n]\n\nexport default function Hello() {\n\tconst { app, myDynamicList } = useFlusStores()\n\tconst dispatcher = useFlusDispatcher()\n\n\tconst changeAppName = () => {\n\t\tdispatcher({ type: UPDATE_APPNAME, payload: { appname: \"Flus SM Name Updated\" } })\n\t}\n\n\tconst createDynamicList = () => {\n\t\tdispatcher({ type: FLUSDYNAMIC_STORE, payload: { store: \"myDynamicList\", data: listItems } })\n\t}\n\n\treturn (\n\t\t<div>\n\t\t\tHello! my name is: {app?.name}, I'm {app?.version} years old\n\t\t\t<br />\n\t\t\t<br />\n\t\t\t<button classsName=\"btn btn-lg btn-primary\" onClick={changeAppName} type=\"button\">\n\t\t\t\tChange App name to: \"Flus SM Name Updated\"\n\t\t\t</button>\n\t\t\t<br />\n\t\t\t<br />\n\t\t\t<br />\n\t\t\t{typeof myDynamicList !== \"undefined\" && Array.isArray(myDynamicList) && (\n\t\t\t\t<>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{myDynamicList?.map(item => (\n\t\t\t\t\t\t\t<li key={item?.id}>\n\t\t\t\t\t\t\t\t<strong>{item?.name}</strong>: {item?.value}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<br />\n\t\t\t<br />\n\t\t\t<button classsName=\"btn btn-lg btn-primary\" onClick={createDynamicList} type=\"button\">\n\t\t\t\tCreate a Dynamic List\n\t\t\t</button>\n\t\t</div>\n\t)\n}\n```\n\n## Step 3 - Actully they're no more steps that's it you are good to go with your app.\n\nIf you want to try out the library and see how it works before using it in your project or implement it in your newly created project\nfeel free to clone the repo and try it out.\n\n## Thanks for reading\n\nFor contribution to this repo well you know what to do\n\n## Licence\n\n**_MIT_** -> Feel free to be a part of the lib build process.\n","readmeFilename":"README.md"}