{"_id":"@angkira/foxstore","_rev":"1-fb70d43925ff52f7c15f67eaffbdea51","name":"@angkira/foxstore","dist-tags":{"latest":"2.4.0"},"versions":{"2.4.0":{"name":"@angkira/foxstore","version":"2.4.0","description":"Reactive Event-Driven Storage for WebApplications based on RxJs (reactive extensions)","main":"lib/index","keywords":["rxjs","reactive","store","rx","rxstore","redux","flux","event","storage"],"scripts":{"build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/angkira/foxstore.git"},"author":{"name":"Yuriy Medvedev"},"license":"ISC","dependencies":{"@types/ramda":"^0.26.44","ramda":"^0.26.1","reflect-metadata":"^0.1.13","rxjs":"^6.5.5","tslint":"^5.20.1"},"bugs":{"url":"https://github.com/angkira/foxstore/issues"},"homepage":"https://github.com/angkira/foxstore#readme","directories":{"lib":"lib"},"devDependencies":{},"gitHead":"1031d832d6e7b36e7259a264908113179cd6b749","_id":"@angkira/foxstore@2.4.0","_nodeVersion":"10.20.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-JLis1VxndyI2k5r0FOnXj6aMhSwHmRHwCACIj8Aw2zrT46wvrZBCA6NTvmlHD4w3GgVv5kIbve0AAqCrrCzDDQ==","shasum":"74e49b70b931aeb58de5535917b486f6c6d7b4c7","tarball":"https://registry.npmjs.org/@angkira/foxstore/-/foxstore-2.4.0.tgz","fileCount":30,"unpackedSize":971885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGDcwCRA9TVsSAnZWagAAYn4QAJLAQ/9C6jyn6tcQIVaI\n/4WBQlOucL/2pUDhKsmgLS+qKvclwTCHrmFGuw8sPo8QgqRV9iAKtH7+G4D8\nT+EYMmK+YPSouJymv0vq1oApT06CEHwkqg+1mSJCR5y6gYMSGbogjOJfusX6\nw2WDBIbHjwEjbyAYX9rbpe9m2MUnWU3VH0DcPA1C1miClr7d2ODX5H2nt7AP\nMymcAepxBf+mQrIudbYeUiYtjRkx0YyNt/EHywjHkefApnA9f+FMBYJCJCVk\nbp7QAwiFHiSWqBptsXNtEdV/YAbw1ThhqoGAnGHK/ICHxfri8Zl41LL8QrgG\naFt/+7pNnvsMBpBNwyNvz3fPVlH8NZcTwCi5N98WD0XimDYbXaIvp66fRQy4\nMzEaZ4ygiHIpYV/BcSv5F0udxw62gV8ZtirkuAwX4PEy0nSa/Ywu5+YdfMCm\niQECwL+KUMwPvkwJkBzKEW9SlhSeO3mVTIjoM0fg375QYXdYX6N8rIdXpgA0\nQUur1fxtpm2/HdqHwoFKu6T+jTC6tb+K6Uhy1Zd346HV5yoYKdYs9Z9UVIsL\nop2OpNx75n8iD/YD7qJq1Z4aniuz/jEQRqMANrjWRAHGz0S/fhbNN7PwdE4q\n6tBsWzXvcVA2D8+sHiSHB2oX3uz5wom6kQUSEEJOTR8dICoBk1LEItKgPCJs\n9CV4\r\n=qp0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8IkhDHhlZ9M4e4fY0lVblH/sLOqkr9N8q/LTlcc/F/gIhAIc5Yr7jWILAFTbjz5lpWowWUBPMOosi/ihw0d+AAsl4"}]},"maintainers":[{"name":"angkira","email":"angkira@yandex.ru"}],"_npmUser":{"name":"angkira","email":"angkira@yandex.ru"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/foxstore_2.4.0_1595422511853_0.9764608263104619"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-22T12:55:11.815Z","2.4.0":"2020-07-22T12:55:12.010Z","modified":"2022-04-04T14:06:04.473Z"},"maintainers":[{"name":"angkira","email":"angkira@yandex.ru"}],"description":"Reactive Event-Driven Storage for WebApplications based on RxJs (reactive extensions)","homepage":"https://github.com/angkira/foxstore#readme","keywords":["rxjs","reactive","store","rx","rxstore","redux","flux","event","storage"],"repository":{"type":"git","url":"git+https://github.com/angkira/foxstore.git"},"author":{"name":"Yuriy Medvedev"},"bugs":{"url":"https://github.com/angkira/foxstore/issues"},"license":"ISC","readme":"# Foxstore\nReactive Event-Driven Store\n\n![alt text](https://raw.githubusercontent.com/angkira/foxstore/master/foxstore-github.jpg \"Logo\")\nSimply analog of NgRx, if you wanna Reactive State Management, but do not want to use big structures (like NgRx) in dependencies. \n\n# Install\n   Easy! Just install it from NPM\n```\n   npm install foxstore\n```\n\n# Usage\n\n## Terminology\n\nAction - function that may handle payload from some Event and returns another Event with some payload or not. Payload may be stream, so you should set async-param to True to handle it as stream.\n\nExample:\n```typescript\n\n   //As method\n   \n   @Action('loadDocs', {writeAs: 'documents'})\n   loadDocs(): Event {\n      return new Event('docsLoaded', this.docService.load(), true)\n      }\n      \n   // As function for EventScheme\n   \n   const loadDocs = new MetaAction('loadDocs', () => new Event('docsLoaded', this.docService.load(), true));\n```\n\nReducer - function that syncronously changing Store state.\n\nExample:\n```typescript\n   \n   @Reducer('docsLoaded')\n   separateDocs(docs: Doc[], state: State): State {\n      return {\n         ...state,\n         activeDocs: docs.filter(isActive),\n         inactiveDocs: docs.filter(not(isActive)),\n         }\n   }\n```\n\nEffect - just some side-effect, result of function wouldn`t be handled\n\nExample:\n\n```typescript\n   \n   @Effect('docsLoaded')\n   logDocs(docs: Doc[]): void {\n      console.log(`Docs loaded - ${docs.length} items`);\n   }\n```\n## For classes\n\nUse decorators for creating your own store!\n\nDescribe Actions, Reducers and Effects by selecting event-names.\n\n\n```typescript\n\n// Model of Store to make easier to navigate\ninterface StoreModel {\n   documents: Doc,\n};\n\n// @Store() - be careful!\n// Store-decorator now not works if you have some DI in Angular-Service\n// or use {provideId: 'root'}, you should just extend ProtoStore class and it will handle decorators\n@Injectable()\nexport class MainStore extends ProtoStore<StoreModel> {\n\n   constructor(\n      private docService: DocumentService,\n      private emailService: EmailService,\n      ) { super(); }\n\n   @Effect('storeLoaded')\n   sendEmail(payload: any): void {\n     this.emailService.send('Inited!');\n   }\n\n   @Action('loadDocs', {writeAs: 'documents'})\n   loadTemplates(filter: IFilter): Event {\n     const docs$ = this.docService.getDocuments();\n\n     // Returnes event cause it is one event-flow\n     return new Event(\n      'documentTemplatesLoaded',\n      docs$, // returnes stream as payload in Event\n      true); // flag 'isAsync' for event with stream-data\n   }\n}  \n   ...\n      // Somewhere in component.ts\n      this.docs$ = this.store.select('documents'); // Here IDE will offer to you list of entities which you set in generic\n      this.store.dispatch('loadDocs');\n```\n\n## Functions\n\nYou can use FoxStore without classes, but functions. It`s short, easy, readable. Can be useful with React or Vue, or another framework without angular-like service-classes\n\n```typescript\nimport { ProtoStore, createStore, EventScheme, schemeGen } from 'foxstore';\n\nconst initState = {\n  rows: 10,\n  columns: 10,\n  data: null,\n};\n\n\nconst eventSheme = schemeGen({ // Important not to set type! Actual for 2.*\n  storeInited: {\n    effects: [{eventName: 'storeInited', effect: console.log}]\n  }\n});\n\nstore = createStore<typeof initState, typeof eventSheme>(initState, null, null, eventSheme);\n\nstore.dispatch('storeInited');\n```\n## Mix ways!\n\nYou can pass your EventScheme to ProtoStore constructor and have EventScheme and decorated methods\nExample:\n\n```typescript\n   import { Action, Event, schemeGen, ProtoStore } from 'foxstore';\n   \n   interface InitState {\n      docs: Doc[],\n   }\n   \n   const initState: InitState = { docs: [], };\n   \n   const EventScheme = schemeGen({\n      storeInited: { effects: [{eventName: 'storeInited', effect: console.log}],\n      loadDocs: {}, // Pass EventScheme to generic to have autocompleting in .dispatch method\n      // Events that decorated can be empty, just to be in keysof EventScheme\n   });\n   \n   export class MeinStore extends ProtoStore<InitState, typeof EventScheme> {\n      constructor(private docService: DocumentService) {\n         super(initState, null, null, EventScheme);\n      }\n      \n      @Action('loadDocs', {writeAs: 'documents'})\n      loadDocs(): Event {\n         return new Event('docsLoaded', this.docService.load(), true)\n      }\n   }\n```\n\nFlux-likely solution that contains simply types and methods to create Event-Driven Asynchronous Storage.\n\nWas tested with Angular-applications.\n\n*** \nAlso, you can create Reactive Stateful Component by extending Store class. Then you will get component-store with own select(), patch() etc. It is useful if you have Component with a lot of dynamic data.\nExample you can see here https://github.com/angkira/foxstore-example\n\n\ntags: foxstore rxjs redux flux storage state reactive react state-management ngrx rx \n","readmeFilename":"README.md"}