(self, (payload$) => {\n function setValue(value: string) {\n self.value = value\n }\n\n return payload$.pipe(\n switchMap((url) => fetch$(url)),\n map((value) => action(setValue, value)),\n )\n }),\n }))\n```\n\n#### Import location\nAs you can see in the example above, `types` need to be imported from `mst-effect`([Why?](#why-we-need-to-import-types-from-mst-effect)).\n\n#### The definition of the `effect`\nThe first parameter is the model instance, as `effect` needs to unsubscribe the [`Observable`](https://rxjs-dev.firebaseapp.com/api/index/class/Observable) when the model is destroyed.\n\nThe second parameter, a factory function, can be thought of as the `Epic` of [redux-observable](https://redux-observable.js.org/docs/basics/Epics.html). The factory function is called only once at model creation. It takes a stream of payloads and returns a stream of actions. — __Payloads in, actions out.__\n\nFinally, `effect` returns a function to feed a new value to the `payload$`. In actual implementation code, it's just an alias to `subject.next`.\n\n#### What is `action`?\n`action` can be considered roughly as a higher-order function that takes a callback function and the arguments for the callback function. But instead of executing immediately, it returns a new function. Action will be immediately invoked when emitted.\n\n```ts\nfunction action(callback, ...params): EffectAction {\n return () => callback(...params)\n}\n```\n\n## API Reference\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/effect.ts) effect\n`effect` is used to manage subscriptions automatically.\n\n##### When using a factory function\n\n```ts\ntype ValidEffectActions = null | EffectAction | (null | EffectAction)[] // `null` for doing nothing\n\nfunction effect(\n self: AnyInstance,\n fn: (payload$: Observable
) => Observable,\n): (payload: P) => void\n```\n\n`payload$` emits data synchronously when the function returned by the effect is called. The returned `Observable` will automatically subscribed by `effect`\n\n##### When using an observable\n\n```ts\ntype ValidEffectActions = null | EffectAction | (null | EffectAction)[]\n\nfunction effect(\n self: AnyInstance,\n observable: Observable,\n): void\n```\n\n`effect` also accepts an `Observable`, most of which behaves identity with `factory function`. The only difference is that it doesn't return a function.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/signal/index.ts) signal\n\n```ts\nexport function signal(\n self: AnyInstance,\n fn?: (payload$: Observable) => Observable,\n): [Observable, (payload: P) => void]\n```\n\n`signal` is an encapsulation of the [`Subject`](https://rxjs-dev.firebaseapp.com/api/index/class/Subject). You can use the second parameter to do some processing of the output data.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/reaction$/index.ts) reaction$\n\n```ts\nexport function reaction$(\n expression: (r: IReactionPublic) => T,\n opts?: IReactionOptions,\n): Observable<{ current: T; prev: T; r: IReactionPublic }>\n```\n\n`reaction$` encapsulates the [`reaction`](https://mobx.js.org/reactions.html#reaction) method from `mobx`. When the returned value changes, it will emit the corresponding data to the returned `Observable`.\n\n## Recipes\n\n#### Error Handling\nWhen an error occurred in `Observable`, `effect` will re-subscribe the `Observable` (will not re-run the factory function). The common practice is to use the [`catchError`](https://rxjs-dev.firebaseapp.com/api/operators/catchError) operator for error handling. Check [fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx) example for more detail.\n\n#### Cancellation\nYou can combine `signal` and [`takeUntil()`](https://rxjs-dev.firebaseapp.com/api/operators/takeUntil) operator to cancel an `Observable`. Check [mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx) example for more detail.\n\n## FAQ\n\n#### Why we need to import `types` from `mst-effect`\nCurrently, `mobx-state-tree` does not support modifying the model outside of actions.\n`mst-effect` overrides `types.model` so that the model can be modified in an asynchronous process.\nBecause `mst-effect` re-export all the variables and types in `mobx-state-tree`, you can simply change the import location to `mst-effect`.\n\n```diff\n- import { types, Instance } from 'mobx-state-tree'\n+ import { types, Instance } from 'mst-effect'\n```\n","readmeFilename":"README.md","gitHead":"995d710a7cf73be5d50e74a1dec474acc7c0d851","_id":"mst-effect@1.0.1-alpha.1","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-TctEgnAbPu5tkNroBKYpi1fUQTkmWpb75Qhfa9k2opk9pqrGsaDrZ6YcaKkjzeE/u9i/YRs8fcjV/zeiDnL1Iw==","shasum":"370cb34a66578c2f7a952947f4f5aa1605aed05b","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.0.1-alpha.1.tgz","fileCount":82,"unpackedSize":66093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgV1QyCRA9TVsSAnZWagAA7v4P/2WhoIfXrZvkGF4mumWt\nCMZX0eK/TAvzGUtX629xP14cvNsuLrGZzSRpHw8Gb8oLigxqudOYWpHGkPcW\nOTxiDLYvMMcivzjeUrIvtbb5gSvEOiPI98ybo0bj2+VxwyaEoHa1mZCpWt6Y\n0B0WwxAkAVm3s8MDD23jy/7gvpdu5cRCEyUB8Mh1kDmiLFQUjS6LADFxYDyJ\nBI5ZEFJjsOcExt5guO1AGIN2W9obWCUJ5R/1IKTr6r9X4rCUg9CR5A4E0Iun\nwF6Gtpy5hheutSSQp0Z59VqYciaYNd25aOsHIAPNldwjUdKs1pRTsr6ye3Ax\nwRmA904V9iAFuLMq5d+1sYbB22jMFoNUB5zI59YIhVTsssHNsd3TyiSF3Qix\nRdhUYFI4D32sZ0jGhvBQeqzlm+YhQm0pVqSO61rV8JyuLPbASwag+Ds5/Pkb\n2V9Ct1kMWFTmiIqia9kH0YXyGfIo6e7sFeOgUs8K8RnKgHGOR8hwqTclqxKn\nfUsDvKYPaikiQiTUd9HrsxgZE66fS5ccjIOXWU6bPFYaxPOUhZow0WMuBXU1\nwc/1/lCNgcfgf+jabxJc9rQLUf+xrYMY1I71wT+mVDbmqUasVhmY059OyDbE\nt9EWIZqVqKvY/45xssdTfKhpIkMFJvLKw1mjp0PcDfBHiO04LQqNz93fyZfH\nHCup\r\n=a/AA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+a6VRWcA+OYxy4P9Em9mFDdXx6lJD1f9ONmGJztL1jAIgWKsFOn2HWXb9VvOwfWToE7tnbODrZ4fGr2YaKHJQ5v0="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.0.1-alpha.1_1616335922313_0.19964612786767444"},"_hasShrinkwrap":false},"1.0.1":{"name":"mst-effect","version":"1.0.1","description":"Designed to be used with MobX-State-Tree to compose asynchronous programs using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"gitHead":"46e3889707b1e0dc6b0a7c97bf5b2a5d6e47c25a","_id":"mst-effect@1.0.1","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-YvyIfeXeSMf4fn3NwzmET6a7/nkUGaFiwhwujgaFYKK1vKV62/EaPQ09hftLejvJ2TZLs0GJXVNPnufcLhO93Q==","shasum":"d52ef5d778efd087427ff0af97482b68253050e8","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.0.1.tgz","fileCount":82,"unpackedSize":66085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgV1bTCRA9TVsSAnZWagAAZbwP/jX4cxzjNyb8/ZqHN8ps\nboBVeZ0qvi4qNrNaVZPBEEIANorikeFA/keHDx2XYW/gZIRPIeawkRuGfQaL\nOTywtfCiffg7aCqXmkj5oKA9HCY9ZrS3PGlLIpoHd8QDcMQHWbUf4A2J9Khh\ntR2CiYvxFk7/F25kq+ZbETwun4M/EnKX490W00LDYjMj4n56VflECjNRclkJ\nre7irHE50qMkdfzC9tj+LCzg/130jIlpyC2CmDFv8Bf7RqXqHnamLzePatEj\nT2t7yCZb8y0fN770U7vMKK84KVbWUEvwDr3MbAemesWX9njSt6yVdp57KfaX\nwZmjjehgL4dZ/aaoxbk6UhMtgFf6obLktGu70MG3GlCsw/1IKYN3Z2duI6F3\nTyvEmZlN3iq228r9TIOfApR7nRCHwlkD3dheokO6XMnc5GSYP535zlwTIQuK\nzrKUJ+wqDBwVSH+mr/eoEKIYEPEWesJz1d5ZHDp9qMRB3u2Gw7BltDs1omhi\ns/VT/DwEamZPO3NfRu5EOLf1MJ3HJVnM/5qYu3KM4urDCm0GBD0IsuZTYvKH\nvGJ/idyvVB9bOQ6UgXrm+ZqhEhYNNLhvffOIjK4R18UGhPUCYtbs/RBzq5YF\nr8z9SclhlUjCONtnfRgBde2/glWTwUniIaWay4XigD8zvQuZMnu9HPDR2kNr\nFzfF\r\n=X3aj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfdlrBaewoqFe8aP/VBd2AFx4suDvyt9HCANuGcphBWAiBccpRAL6X5JM53QDn9qBUGiV5C9Tbb/dXqUW1SC3g7TA=="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.0.1_1616336594498_0.46009154140303"},"_hasShrinkwrap":false},"1.0.2":{"name":"mst-effect","version":"1.0.2","description":"Designed to be used with MobX-State-Tree to compose asynchronous programs using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"gitHead":"11e56e804d8af282aa399b5ae03b3f67ae4fa360","_id":"mst-effect@1.0.2","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-JNcbte3HKGQDoVtRzbz46OYjfuSooIcroaaOw3b2HGp+GmlIE0on1CSn7WkyJW3j3kPylA55j2tIEmAbw9rXTA==","shasum":"cf59c2d11ddd01c4fc07ea8a9ab24bf7b0f714a3","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.0.2.tgz","fileCount":88,"unpackedSize":76286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXzbcCRA9TVsSAnZWagAA9xcP/08J3pON3mO47uh4KyRj\nvrTwIZgy1Zv3cPsUcGq7Uzet1HgHuIAP3gKNEHxrHBIguQy3jUYZUDW49Dxu\nmoaWW7rS5/hyv9JknI3aaHw7lABIrkrqz02xMTmQLzMwpwQZp8iGo06EvpDw\nOZqZuH4T0Vpdf0QnE97SToT/VSNOkVPEXBdJFgq8nWzgEebwT6q0kbhvPoD+\n12xYw3nxS7lvCXlH72WvMgFVK+TkeUX+oHVScXsOtFLpxlp30xNoyMVLeiUQ\nk9r+SBQB8p8gab9SbvviElxz0HDQlJGmAeNcud2UIXOLuUtCVgk0psZ7T2V6\nlVboq+C+6RH9l2PhGMWIVmntbpR/clJvNolQ43wrB1TF5P4p2HJ4YDfo7w4z\nI5NYx9W6kAEDbYn4k2K2enaLy9ajT9ajmTC7+Qw2U1lBjs42bQ3mNzvotocm\nQDMJKEbcYE8QVzOuna7IBazK/p164BUjOFHw/+VGyf3gaRWZhE1U2RnnmOzf\nfhuG8tKBYcP2cCJUmtFA9/Vu2cdyg7pfCqsvccJvEPpc5jPYv10BPC/T3wZB\n0M6vKlylPZ1vCdaSDsE0cYigQO8Zk9RPeGpHmq4EoP2IevMp9K4S7MIlc4ZQ\nDE/XaNonn2bDm+HjanC58azxhNHogPYeOdhRCcHGqretesqKP/WBrrrLxFt8\n59YF\r\n=hx0F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkLdcZr4gXeGkBUeDlPkFC9omVYIkQ7nc7PhY0zm3aeAiEAtmLHzcIlGZABNV9DhAhrg84tXhU7y189ke4O10LNSt4="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.0.2_1616852700161_0.4219776794610244"},"_hasShrinkwrap":false},"1.1.0-alpha.1":{"name":"mst-effect","version":"1.1.0-alpha.1","description":"Designed to be used with MobX-State-Tree to compose asynchronous programs using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"readme":"\n \n ![\"mst-effect\"](\"https://user-images.githubusercontent.com/12002941/111877518-b2c60900-89de-11eb-8f28-d5fd95897258.png\")
\n \n
\n\n\n \n ![\"GitHub](\"https://img.shields.io/npm/l/mst-effect?colorA=373737&colorB=0A70E9&style=flat\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/v/mst-effect?colorA=373737&colorB=0A70E9&style=flat\")
\n \n \n ![\"Bundle](\"https://img.shields.io/bundlephobia/min/mst-effect?label=bundle%20size&colorA=373737&colorB=0A70E9&style=flat\")
\n \n \n ![\"Coverage](\"https://img.shields.io/coveralls/github/Runjuu/mst-effect?colorA=373737&colorB=0A70E9&style=flat\")
\n \n \n ![\"Discord\"](\"https://img.shields.io/discord/822723953465360435?style=flat&colorA=373737&colorB=0A70E9&label=discord&logo=discord&logoColor=FFF\")
\n \n
\n\n`mst-effect` is designed to be used with MobX-State-Tree to create asynchronous actions using RxJS. In case you haven't used them before:\n\n> `MobX-State-Tree` is a full-featured reactive state management library that can __structure the state model__ super intuitively.
\n> `RxJS` is a library for composing asynchronous and event-based programs that provides the best practice to __manage async codes__.\n\nIf you are still hesitant about learning `RxJS`, check the examples below and play around with them. I assure you that you'll be amazed by what it can do and how clean the code could be. \n\nAlready using `MobX-State-Tree`? Awesome! `mst-effect` is 100% compatible with your current project.\n\n## Examples\n- [Fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx)\n- [Fetch with token](https://codesandbox.io/s/fetch-with-token-rbveh?file=/src/app.tsx)\n- [Handle user input](https://codesandbox.io/s/handle-user-input-ef1pt?file=/src/app.tsx)\n- [Mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx)\n- [Back pressure](https://codesandbox.io/s/backpressure-ulu1y?file=/src/app.tsx)\n\n## Installation\n`mst-effect` has peer dependencies of [mobx](https://www.npmjs.com/package/mobx), [mobx-state-tree](https://www.npmjs.com/package/mobx-state-tree) and [rxjs](https://www.npmjs.com/package/rxjs), which will have to be installed as well.\n\n##### Using [yarn](https://yarnpkg.com/en/package/mst-effect):\n\n```bash\nyarn add mst-effect\n```\n\n##### Or via [npm](https://www.npmjs.com/package/mst-effect):\n\n```bash\nnpm install mst-effect --save\n```\n\n## Basics\n__`effect`__ is the core method of `mst-effect`. It can automatically manage subscriptions and execute the emitted actions. For example:\n\n```ts\nimport { types, effect, action } from 'mst-effect'\nimport { map, switchMap } from 'rxjs/operators'\n\nconst Model = types\n .model({\n value: types.string,\n })\n .actions((self) => ({\n fetch: effect(self, (payload$) => {\n function setValue(value: string) {\n self.value = value\n }\n\n return payload$.pipe(\n switchMap((url) => fetch$(url)),\n map((value) => action(setValue, value)),\n )\n }),\n }))\n```\n\n#### Import location\nAs you can see in the example above, `types` need to be imported from `mst-effect`([Why?](#why-we-need-to-import-types-from-mst-effect)).\n\n#### The definition of the `effect`\nThe first parameter is the model instance, as `effect` needs to unsubscribe the [`Observable`](https://rxjs-dev.firebaseapp.com/api/index/class/Observable) when the model is destroyed.\n\nThe second parameter, a factory function, can be thought of as the `Epic` of [redux-observable](https://redux-observable.js.org/docs/basics/Epics.html). The factory function is called only once at model creation. It takes a stream of payloads and returns a stream of actions. — __Payloads in, actions out.__\n\nFinally, `effect` returns a function to feed a new value to the `payload$`. In actual implementation code, it's just an alias to `subject.next`.\n\n#### What is `action`?\n`action` can be considered roughly as a higher-order function that takes a callback function and the arguments for the callback function. But instead of executing immediately, it returns a new function. Action will be immediately invoked when emitted.\n\n```ts\nfunction action(callback, ...params): EffectAction {\n return () => callback(...params)\n}\n```\n\n## API Reference\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/effect.ts) effect\n`effect` is used to manage subscriptions automatically.\n\n##### When using a factory function\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\nfunction effect(\n self: AnyInstance,\n fn: (payload$: Observable
) => Observable,\n): (payload: P) => void\n```\n\n`payload$` emits data synchronously when the function returned by the effect is called. The returned `Observable` will automatically subscribed by `effect`\n\n##### When using an observable\n\n```ts\ntype ValidEffectActions = null | EffectAction | (null | EffectAction)[]\n\nfunction effect(\n self: AnyInstance,\n observable: Observable,\n): void\n```\n\n`effect` also accepts an `Observable`, most of which behaves identity with `factory function`. The only difference is that it doesn't return a function.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/signal/index.ts) signal\n\n```ts\nexport function signal(\n self: AnyInstance,\n fn?: (payload$: Observable) => Observable,\n): [Observable, (payload: P) => void]\n```\n\n`signal` is an encapsulation of the [`Subject`](https://rxjs-dev.firebaseapp.com/api/index/class/Subject). You can use the second parameter to do some processing of the output data.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/reaction$/index.ts) reaction$\n\n```ts\nexport function reaction$(\n expression: (r: IReactionPublic) => T,\n opts?: IReactionOptions,\n): Observable<{ current: T; prev: T; r: IReactionPublic }>\n```\n\n`reaction$` encapsulates the [`reaction`](https://mobx.js.org/reactions.html#reaction) method from `mobx`. When the returned value changes, it will emit the corresponding data to the returned `Observable`.\n\n## Recipes\n\n#### Error Handling\nWhen an error occurred in `Observable`, `effect` will re-subscribe the `Observable` (will not re-run the factory function). The common practice is to use the [`catchError`](https://rxjs-dev.firebaseapp.com/api/operators/catchError) operator for error handling. Check [fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx) example for more detail.\n\n#### Cancellation\nYou can combine `signal` and [`takeUntil()`](https://rxjs-dev.firebaseapp.com/api/operators/takeUntil) operator to cancel an `Observable`. Check [mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx) example for more detail.\n\n## FAQ\n\n#### Why we need to import `types` from `mst-effect`\nCurrently, `mobx-state-tree` does not support modifying the model outside of actions.\n`mst-effect` overrides `types.model` so that the model can be modified in an asynchronous process.\nBecause `mst-effect` re-export all the variables and types in `mobx-state-tree`, you can simply change the import location to `mst-effect`.\n\n```diff\n- import { types, Instance } from 'mobx-state-tree'\n+ import { types, Instance } from 'mst-effect'\n```\n","readmeFilename":"README.md","gitHead":"96fa621ebe51a92f857f7397c0260390de577357","_id":"mst-effect@1.1.0-alpha.1","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-fonOeTC1vompsFYxaFCHukDxm3/wcKsKAGmRGTgTu/LUujGw65OvzzOGE8X2sF1lLagX8pZuBRYODaHsHunl/A==","shasum":"cd15829552054155b441bdc08ff2a65de23137f7","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.1.0-alpha.1.tgz","fileCount":88,"unpackedSize":86403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYE5PCRA9TVsSAnZWagAAaPgP/jFS597B0bXkOMmM7S/2\nWuwM/j3YS3nTldseuJSvgTh7gylIvTLncqBEWdbSl3uvECOrieB61FD3zizR\nHixrx1P9rPUsC6+1XtyK7+gMkx1pwrz2pkKRwF6myiqMIl7QTV+WZn1tWAbl\nieTcj9zQ0qExoaX94cXwhxTOxVIlZ6BWopGDdsvcDQMw8UwrVd8nB17igzkw\nfzBPBD/XG07BiRW3lTiF8kQRY6GA2//K6fWWRrOWRw4T6qEZt6HqdAZroho9\nF5Glq3R/ZTcJBbdK0HKaWEKAl31J20Apuw4c1YVxxQ6fpq48NCDq3KT+24fO\nlGmtgNm6aszaXZyRWYO57vVuZp3DAywoZHqs6CMMLZvgVEKXweQUI4dVP7nd\nc0Q4SyTK4d4DuVWvYkBnLKeUPVxPCgiJ5srRles0pt3+QA1yaGfo1q66jACl\nEcm5ZcWNFzA/5yjuPmsdiEYCtc7XvoBvq6b/dSSseBHoetOqYfrrBa5MkZAV\n7RUoCRdfU/6Y+R4F5hgXB9kSQeXcUT/zryG/eDf4FksdMMJ001QyzMPKAwn9\nzMNU1kK2hf4Am4Wfq23uZyeu1E5VjfJ+eU3apoGAx8kA2FzkfOZAetyjZZfm\nftU13gqNoX09G0kuopcG4rTEJNZo40qOCq0Kp8prXieZRMyX+4/QDYuv0Cfd\nfEOl\r\n=PaEH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0HieWRM9F+DFvRlyRCdMI9amava+HNXdrnVERvB3GOAiA9joVkgAXSkMoceZssQwXYRanf9UC7DMwOW5KZ+2Gvuw=="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.1.0-alpha.1_1616924238457_0.5132240295921677"},"_hasShrinkwrap":false},"1.1.0-alpha.2":{"name":"mst-effect","version":"1.1.0-alpha.2","description":"Designed to be used with MobX-State-Tree to compose asynchronous programs using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"readme":"\n \n \n \n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n`mst-effect` is designed to be used with MobX-State-Tree to create asynchronous actions using RxJS. In case you haven't used them before:\n\n> `MobX-State-Tree` is a full-featured reactive state management library that can **structure the state model** super intuitively.
> `RxJS` is a library for composing asynchronous and event-based programs that provides the best practice to **manage async codes**.\n\nIf you are still hesitant about learning `RxJS`, check the examples below and play around with them. I assure you that you'll be amazed by what it can do and how clean the code could be.\n\nAlready using `MobX-State-Tree`? Awesome! `mst-effect` is 100% compatible with your current project.\n\n## Examples\n\n- [Fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx)\n- [Fetch with token](https://codesandbox.io/s/fetch-with-token-rbveh?file=/src/app.tsx)\n- [Handle user input](https://codesandbox.io/s/handle-user-input-ef1pt?file=/src/app.tsx)\n- [Mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx)\n- [Back pressure](https://codesandbox.io/s/backpressure-ulu1y?file=/src/app.tsx)\n\n## Installation\n\n`mst-effect` has peer dependencies of [mobx](https://www.npmjs.com/package/mobx), [mobx-state-tree](https://www.npmjs.com/package/mobx-state-tree) and [rxjs](https://www.npmjs.com/package/rxjs), which will have to be installed as well.\n\n##### Using [yarn](https://yarnpkg.com/en/package/mst-effect):\n\n```bash\nyarn add mst-effect\n```\n\n##### Or via [npm](https://www.npmjs.com/package/mst-effect):\n\n```bash\nnpm install mst-effect --save\n```\n\n## Basics\n\n**`effect`** is the core method of `mst-effect`. It can automatically manage subscriptions and execute the emitted actions. For example:\n\n```ts\nimport { types, effect, action } from 'mst-effect'\nimport { map, switchMap } from 'rxjs/operators'\n\nconst Model = types\n .model({\n value: types.string,\n })\n .actions((self) => ({\n fetch: effect(self, (payload$) => {\n function setValue(value: string) {\n self.value = value\n }\n\n return payload$.pipe(\n switchMap((url) => fetch$(url)),\n map((value) => action(setValue, value)),\n )\n }),\n }))\n```\n\n#### Import location\n\nAs you can see in the example above, `types` need to be imported from `mst-effect`([Why?](#why-we-need-to-import-types-from-mst-effect)).\n\n#### The definition of the `effect`\n\nThe first parameter is the model instance, as `effect` needs to unsubscribe the [`Observable`](https://rxjs-dev.firebaseapp.com/api/index/class/Observable) when the model is destroyed.\n\nThe second parameter, a factory function, can be thought of as the `Epic` of [redux-observable](https://redux-observable.js.org/docs/basics/Epics.html). The factory function is called only once at model creation. It takes a stream of payloads and returns a stream of actions. — **Payloads in, actions out.**\n\nFinally, `effect` returns a function to feed a new value to the `payload$`. In actual implementation code, it's just an alias to `subject.next`.\n\n#### What is `action`?\n\n`action` can be considered roughly as a higher-order function that takes a callback function and the arguments for the callback function. But instead of executing immediately, it returns a new function. Action will be immediately invoked when emitted.\n\n```ts\nfunction action(callback, ...params): EffectAction {\n return () => callback(...params)\n}\n```\n\n## API Reference\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/effect.ts) effect\n\n`effect` is used to manage subscriptions automatically.\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype EffectDispatcher = (\n payload: P,\n handler?: (resolve$: Observable) => Observable,\n) => Promise\n\nfunction effect(\n self: AnyInstance,\n fn: (payload$: Observable) => Observable,\n): EffectDispatcher\n```\n\n`payload$` emits data synchronously when the function returned by the effect is called. The returned `Observable` will automatically subscribed by `effect`\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/signal/index.ts) signal\n\n```ts\nexport function signal(\n self: AnyInstance,\n fn?: (payload$: Observable) => Observable,\n): [Observable, (payload: P) => void]\n```\n\n`signal` is an encapsulation of the [`Subject`](https://rxjs-dev.firebaseapp.com/api/index/class/Subject). You can use the second parameter to do some processing of the output data.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/reaction$/index.ts) reaction$\n\n```ts\nexport function reaction$(\n expression: (r: IReactionPublic) => T,\n opts?: IReactionOptions,\n): Observable<{ current: T; prev: T; r: IReactionPublic }>\n```\n\n`reaction$` encapsulates the [`reaction`](https://mobx.js.org/reactions.html#reaction) method from `mobx`. When the returned value changes, it will emit the corresponding data to the returned `Observable`.\n\n## Recipes\n\n#### Error Handling\n\nWhen an error occurred in `Observable`, `effect` will re-subscribe the `Observable` (will not re-run the factory function). The common practice is to use the [`catchError`](https://rxjs-dev.firebaseapp.com/api/operators/catchError) operator for error handling. Check [fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx) example for more detail.\n\n#### Cancellation\n\nYou can combine `signal` and [`takeUntil()`](https://rxjs-dev.firebaseapp.com/api/operators/takeUntil) operator to cancel an `Observable`. Check [mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx) example for more detail.\n\n## FAQ\n\n#### Why we need to import `types` from `mst-effect`\n\nCurrently, `mobx-state-tree` does not support modifying the model outside of actions.\n`mst-effect` overrides `types.model` so that the model can be modified in an asynchronous process.\nBecause `mst-effect` re-export all the variables and types in `mobx-state-tree`, you can simply change the import location to `mst-effect`.\n\n```diff\n- import { types, Instance } from 'mobx-state-tree'\n+ import { types, Instance } from 'mst-effect'\n```\n","readmeFilename":"README.md","gitHead":"f07a892a4f0b4704836d27dca614f57bb4e4d70c","_id":"mst-effect@1.1.0-alpha.2","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-eZWszqgxEuN5C/dTVwfBi5wkgEjiaBdjSlhEXviPD7zZFFK+OvnCuw6MR17Zb6aQxUNwsYQVlpUEibGj5yu6nA==","shasum":"2cc9c7c54cdd46fcc1bef2a242f506f66d96d500","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.1.0-alpha.2.tgz","fileCount":88,"unpackedSize":84092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYFLkCRA9TVsSAnZWagAA+oYQAJhI8BrD6ArryaRXz1m3\nLMagIHXgiFrzdmCV6f9QHI1OdPHB/absWp+BeEczqK53E+1hWBnmiR0eiVRB\nKdrrQZbaknJ/L8HEl6GKJQ+1PDkb8remd7nBowB0xgDzskLUsw0KkRBIm32m\nwcjLRj2XnK8VnA4/yCMznbkyUqz9nJT4qxF6/AeMc7Vz2b/lowZIHBD25zHT\nisoxZNMur6F+l/igI49ibY2wXU0Y2mE9fur0le/DNVy0dBSjfFkd1WwrgOZ+\nQ5LvxrWiCPq/RFLBr0OsWNKJLsKcvaGkBJIKXvIvXynPTNUESl7l3By3DQav\npA9ZTumLJmdVLPMTwm+tOh/1s38FDEAoYBDJMsitd01k4twK9HMLHpvkyYeU\nx3qJn81fb/v6Lx6tAogIBwQP4BiPy4bqqMhPeekzlVvH3Ld8Wu+TUB7H4Qd0\n9BD8p/BkFWePTKp1B5tdQRSMNCN3oyUqEFl4Be64mN1BhH89Shg4T1KaAH60\n/FIcrvsg2hoQplHr3TnqZ0v5qzJcQvx2THIiN9Pt3eo36a8OMBy6hbxWmAhM\nA+FYTZYS+yNCIWCu5mXDHtMqgq5OW0mPSROVZZCodzAcQSN4oiYqjhJuVN5m\nAxWI1hN63Vtm7dJuDpn45m0Q/chzUnCbdclLOi0b9AzSsuSAtPcjtJij+5aq\nC1OU\r\n=hU4X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6+5+JbZXII4UXrnb7F22pKzNDhYbXHjPgKSUmjkvKowIhAKnJXZu0FOlMVsFLV3Qzj2dACId1nPVH819sOTubYBEG"}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.1.0-alpha.2_1616925411814_0.2437546507090549"},"_hasShrinkwrap":false},"1.1.0":{"name":"mst-effect","version":"1.1.0","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"gitHead":"d57fef37e47229941541c25200b083a759ed0476","_id":"mst-effect@1.1.0","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-GPcXDsLo5f71AIDW1VyZtRzLU0D/gcd8787fjjin6efsy3VrPnwyz4/djoukc9olXkT8OW3r1RKpXeRzKEUoOg==","shasum":"bde301481a16d0db53ace6ad3950e8df3cc641fd","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.1.0.tgz","fileCount":88,"unpackedSize":84082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYFTKCRA9TVsSAnZWagAAf5EP/2zod0sQxfnSvHF6bZdw\nDuMfztCHClLrQjh0BmsZVbQtvpqg7x25ZXIPFu6HIWa6a+vF7EBFPowJ3eoM\nXB6bT86yN/c05r+MnkYfgWlv3jej0suqNgcU8yldCp+cRMwWm9um/yekDdFa\nSSK/dJfiEulxx7z+VuT6vD/P6FERL+z1gFLJCo32rflzdOEUCQZKuXMCNLZS\n/7qU71koXN1XFm28NUy4G+ScvwcmfEyfvs6HyzTWYKtVNZrZdnSVOr8bqx56\nVZmVk3kapf4c82SAdIyw7vHaQReB8CUkZK73unaEDCW5p1GgDbAAOosH77VX\n8Lf402C2BELPjI8kVHNJuwhbceeHfzjitZjmizhjB5W1fpfFA0CJgx9Iu/MO\n9g0+cVxz6XWIxZiQ5JoEUnrElsEQbFENnaCvTMBLmd5c/vXR1I9LNBo+92tG\n4vEd+e+6up4zWf2MDXOJet4kWXL0XDCg1loB9cfg+yfyG/3zcCttgyonHPvi\nxWbMRtarxNuZoEN0m3T30/0k9vJJikE0/eSBbGQeC9oRBwhELMWEprRvAiYP\n6o1pAIMt3OPoJKT1ncot3vaeMsIxdJsGq9eu/Mwl5EmvGdLOYYlbcHtfOACN\nY019oPbcXhkEHc6wqY2bDSyePGCTpFIZf3JyhUZqqNFWnNtpSRazsAh13ZHe\nNOrX\r\n=ni3m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMniWUj5xXJXcZACJ9zmBuL6ls6DLo4yIukrp82nEp9AiBkS/q+5556jAIjP98W3K3x31Ba6l4kMrAofc6Q2Si0Qg=="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.1.0_1616925897771_0.9009669501698652"},"_hasShrinkwrap":false},"1.1.1":{"name":"mst-effect","version":"1.1.1","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"gitHead":"4b4daa6dae04c46fc715287523be1a33b8991766","_id":"mst-effect@1.1.1","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-feqdzn96zBj/i4s2aRYFOA9+gXio+lQNBaXPbqe4oaXSeWLza88/ST/hJOkBUp59CcEGGHJ2rB/oHJhPGVEeug==","shasum":"be1542e6f6bac029f025c8b9b4ef9299d200212f","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.1.1.tgz","fileCount":88,"unpackedSize":84083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYFdxCRA9TVsSAnZWagAANtsP/RPoLBAAu/BUbxBBGcDq\nYK9LjuNhfDfuRGpHe7ryJpKN2uD3f6z+l08SrBMkvyeolSOfBa582EHmHF4G\nssbgoFHEME+HbOzl45GfoAfB+j5+seNv/1HxA+htX7tIHj/zjKmY2bUyJGpL\nVP9XbfHJP7dIx+G37pwklm7O0JFj2PVP7LKr1TtMHW6qKYLbRGdRQ2CrYU3m\nrngSG0gprHTmvUFoPFLVvwOVrYPqNaqb60AlCK5iomb0BRDTLbD/i/5o8qk4\nO5FaahGoQpA7wyK2yS5DPpl3SD5gJDctotuKMcWeE3Lue9dQe0ryM4Yrr4OU\nQ5H3pElAOfHsj58Dt/1KTb0t2ylSzjB6iwSRnpgKvLqYDa5pSNx3Q1Dpccpk\noslso7zDN7VnTbm1WSPatsgCSngSCOaqvi10VGK1wRtmRyJZwqjen5AWg57y\nGe3FkBkCjOCq7o5QW3LqZKcXye9ZmPYlhIFQJPrWMzdswHtaejQEk4zCqAIO\nubCnirSoecjLcU0ZEskrqfkHKGs2YO4OddIuDKR6EFZA7C1tkbqkpQlbP5wW\nW7dYJCmnfn9+KtFhMAtytxWgXzjbp31XLEdT+ykBEOxbdb6Q0xPcIN8c+E1X\nDFhSYIHCBUn1Z6zp6ugfxstDQFG1O5NVE48AYJXbh9ZGmaHJC2mV6JQaovxE\nJvns\r\n=qZcd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFxwZg+P8lh5yC3uwWeEZmzGcvJwEMgCbgDE3uZZeixAIgaEqRbDj+yGXZQ7lBmYUeinyQ3FquZOyU49bR22SXKuc="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.1.1_1616926577018_0.8480505112324144"},"_hasShrinkwrap":false},"1.2.0-alpha.1":{"name":"mst-effect","version":"1.2.0-alpha.1","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"readme":"\n \n \n \n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n`mst-effect` is designed to be used with MobX-State-Tree to create asynchronous actions using RxJS. In case you haven't used them before:\n\n> `MobX-State-Tree` is a full-featured reactive state management library that can **structure the state model** super intuitively.\n>
`RxJS` is a library for composing asynchronous and event-based programs that provides the best practice to **manage async codes**.\n\nIf you are still hesitant about learning `RxJS`, check the examples below and play around with them. I assure you that you'll be amazed by what it can do and how clean the code could be.\n\nAlready using `MobX-State-Tree`? Awesome! `mst-effect` is 100% compatible with your current project.\n\n## Examples\n\n- [Fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx)\n- [Fetch with token](https://codesandbox.io/s/fetch-with-token-rbveh?file=/src/app.tsx)\n- [Handle user input](https://codesandbox.io/s/handle-user-input-ef1pt?file=/src/app.tsx)\n- [Mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx)\n- [Back pressure](https://codesandbox.io/s/backpressure-ulu1y?file=/src/app.tsx)\n\n## Installation\n\n`mst-effect` has peer dependencies of [mobx](https://www.npmjs.com/package/mobx), [mobx-state-tree](https://www.npmjs.com/package/mobx-state-tree) and [rxjs](https://www.npmjs.com/package/rxjs), which will have to be installed as well.\n\n##### Using [yarn](https://yarnpkg.com/en/package/mst-effect):\n\n```bash\nyarn add mst-effect\n```\n\n##### Or via [npm](https://www.npmjs.com/package/mst-effect):\n\n```bash\nnpm install mst-effect --save\n```\n\n## Basics\n\n**`effect`** is the core method of `mst-effect`. It can automatically manage subscriptions and execute the emitted actions. For example:\n\n```ts\nimport { types, effect, action } from 'mst-effect'\nimport { map, switchMap } from 'rxjs/operators'\n\nconst Model = types\n .model({\n value: types.string,\n })\n .actions((self) => ({\n fetch: effect(self, (payload$) => {\n function setValue(value: string) {\n self.value = value\n }\n\n return payload$.pipe(\n switchMap((url) => fetch$(url)),\n map((value) => action(setValue, value)),\n )\n }),\n }))\n```\n\n#### Import location\n\nAs you can see in the example above, `types` need to be imported from `mst-effect`([Why?](#why-we-need-to-import-types-from-mst-effect)).\n\n#### The definition of the `effect`\n\nThe first parameter is the model instance, as `effect` needs to unsubscribe the [`Observable`](https://rxjs-dev.firebaseapp.com/api/index/class/Observable) when the model is destroyed.\n\nThe second parameter, a factory function, can be thought of as the `Epic` of [redux-observable](https://redux-observable.js.org/docs/basics/Epics.html). The factory function is called only once at model creation. It takes a stream of payloads and returns a stream of actions. — **Payloads in, actions out.**\n\nFinally, `effect` returns a function to feed a new value to the `payload$`. In actual implementation code, it's just an alias to `subject.next`.\n\n#### What is `action`?\n\n`action` can be considered roughly as a higher-order function that takes a callback function and the arguments for the callback function. But instead of executing immediately, it returns a new function. Action will be immediately invoked when emitted.\n\n```ts\nfunction action(callback, ...params): EffectAction {\n return () => callback(...params)\n}\n```\n\n## API Reference\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/effect.ts) effect\n\n`effect` is used to manage subscriptions automatically.\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype EffectDispatcher = (payload: P) => void\n\nfunction effect
(\n self: AnyInstance,\n fn: (payload$: Observable
) => Observable,\n): EffectDispatcher\n```\n\n`payload$` emits data synchronously when the function returned by the effect is called. The returned `Observable` will automatically subscribed by `effect`\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/doll-effect.ts) dollEffect\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype DollEffectDispatcher = (\n payload: P,\n handler?: (resolve$: Observable) => Observable,\n) => Promise\n\ntype SignalDispatcher = (value: S) => void\n\nfunction dollEffect(\n self: AnyInstance,\n fn: (\n payload$: Observable,\n signalDispatcher: SignalDispatcher,\n ) => Observable,\n): DollEffectDispatcher\n```\n\n`dollEffect` is almost identical with `effect`. The primary different is dispatcher's return value.\n`DollEffectDispatcher` will return a `Promise` each time calling.\nThe `Promise` will become fulfill when `signalDispatcher` being invoked.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/signal/index.ts) signal\n\n```ts\nexport function signal(\n self: AnyInstance,\n fn?: (payload$: Observable) => Observable,\n): [Observable, (payload: P) => void]\n```\n\n`signal` is an encapsulation of the [`Subject`](https://rxjs-dev.firebaseapp.com/api/index/class/Subject). You can use the second parameter to do some processing of the output data.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/reaction$/index.ts) reaction$\n\n```ts\nexport function reaction$(\n expression: (r: IReactionPublic) => T,\n opts?: IReactionOptions,\n): Observable<{ current: T; prev: T; r: IReactionPublic }>\n```\n\n`reaction$` encapsulates the [`reaction`](https://mobx.js.org/reactions.html#reaction) method from `mobx`. When the returned value changes, it will emit the corresponding data to the returned `Observable`.\n\n## Recipes\n\n#### Error Handling\n\nWhen an error occurred in `Observable`, `effect` will re-subscribe the `Observable` (will not re-run the factory function). The common practice is to use the [`catchError`](https://rxjs-dev.firebaseapp.com/api/operators/catchError) operator for error handling. Check [fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx) example for more detail.\n\n#### Cancellation\n\nYou can combine `signal` and [`takeUntil()`](https://rxjs-dev.firebaseapp.com/api/operators/takeUntil) operator to cancel an `Observable`. Check [mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx) example for more detail.\n\n## FAQ\n\n#### Why we need to import `types` from `mst-effect`\n\nCurrently, `mobx-state-tree` does not support modifying the model outside of actions.\n`mst-effect` overrides `types.model` so that the model can be modified in an asynchronous process.\nBecause `mst-effect` re-export all the variables and types in `mobx-state-tree`, you can simply change the import location to `mst-effect`.\n\n```diff\n- import { types, Instance } from 'mobx-state-tree'\n+ import { types, Instance } from 'mst-effect'\n```\n","readmeFilename":"README.md","gitHead":"caa6b8384d961d879c4e4a00246d71a5f71fa56b","_id":"mst-effect@1.2.0-alpha.1","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-WjThYSeXxrEJdZ+/RjVE0J/YA6lBJ+M/GSX2ZTMMneFEHWPRyVZvZ1YARf6Fw47bvxeniDVG1R//dfXWPz3F9A==","shasum":"8be9ada09d75c3360feb43175b26a48b8a9edaaf","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.2.0-alpha.1.tgz","fileCount":104,"unpackedSize":97544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYGZoCRA9TVsSAnZWagAAxMgP/ixj3PoY2argUQUVvOIk\nGCzkbYImfffYCdT30G828KQ5S6zQfKvjsiUXwbGeyZfVdYBgaojE1MmmAgfz\nqIlHpEwNJexMF92EhYz5Xq6APqHBR6Etkf4rB8EpiJkZJK7BI8rQgLOMJHVG\n9XntnjH+M1gXSJfViEmLgR/DjX5yFCTSwJjmgEl7Zh6HKRY0hI0qnpqZIKGz\nMa5wyLecBVD+rfWZm5twHXimfE4xAHE6ryE1n2/AsT3fX+qOuTG7snaqkElB\nTKb1kQz/1PJnvs7HmSjWwm65y/W5zCzJNgXI1pS+HqOjH+okMWh6ms4YllGo\nM4HWzYtkvjcAtHNqs8YehH4uZslL32w/YPn2f0YVpgW+CoGEsO70/QFqBdDN\nCerEQAjWG5lV6OIo3fwGwRiolxE0YeWUPfDHrSCIuFeopYt7ZOeqnkyljlpQ\nX0L5agDMEHvXl03/EbiOfRWSuZbefBV8Zjw8sxt741SP/c3KNKuVSqmtk88m\n2bdKenEoKO5x2VGxxaSjty4NEUSKTuNbUDf8HAb3+cadPii3DnTeqTfV2KNS\npKvFWIKvH+byGhAOWJGnoGpXsqQObitTpBG4DnDbMrAC/uEpk6KmgztYMcTN\nSnji/T2gEBc+OVTM8RVvTvBh6ePT/jh7VWzhf+wS2+NYIS368tN1lGyguST2\nwl4h\r\n=QmIw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLWePaecr71xuBi/95b3z2jqdLVpFL5rhZFeyMAAFoZAIhAMrqMLtY5cR09sdfQ+8M3Xuy42HPdScrsjQ4oUPgai10"}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.2.0-alpha.1_1616930407839_0.40681574555968325"},"_hasShrinkwrap":false},"1.2.0-alpha.2":{"name":"mst-effect","version":"1.2.0-alpha.2","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"readme":"\n \n \n \n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n`mst-effect` is designed to be used with MobX-State-Tree to create asynchronous actions using RxJS. In case you haven't used them before:\n\n> `MobX-State-Tree` is a full-featured reactive state management library that can **structure the state model** super intuitively.\n>
`RxJS` is a library for composing asynchronous and event-based programs that provides the best practice to **manage async codes**.\n\nIf you are still hesitant about learning `RxJS`, check the examples below and play around with them. I assure you that you'll be amazed by what it can do and how clean the code could be.\n\nAlready using `MobX-State-Tree`? Awesome! `mst-effect` is 100% compatible with your current project.\n\n## Examples\n\n- [Fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx)\n- [Fetch with token](https://codesandbox.io/s/fetch-with-token-rbveh?file=/src/app.tsx)\n- [Handle user input](https://codesandbox.io/s/handle-user-input-ef1pt?file=/src/app.tsx)\n- [Mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx)\n- [Back pressure](https://codesandbox.io/s/backpressure-ulu1y?file=/src/app.tsx)\n\n## Installation\n\n`mst-effect` has peer dependencies of [mobx](https://www.npmjs.com/package/mobx), [mobx-state-tree](https://www.npmjs.com/package/mobx-state-tree) and [rxjs](https://www.npmjs.com/package/rxjs), which will have to be installed as well.\n\n##### Using [yarn](https://yarnpkg.com/en/package/mst-effect):\n\n```bash\nyarn add mst-effect\n```\n\n##### Or via [npm](https://www.npmjs.com/package/mst-effect):\n\n```bash\nnpm install mst-effect --save\n```\n\n## Basics\n\n**`effect`** is the core method of `mst-effect`. It can automatically manage subscriptions and execute the emitted actions. For example:\n\n```ts\nimport { types, effect, action } from 'mst-effect'\nimport { map, switchMap } from 'rxjs/operators'\n\nconst Model = types\n .model({\n value: types.string,\n })\n .actions((self) => ({\n fetch: effect(self, (payload$) => {\n function setValue(value: string) {\n self.value = value\n }\n\n return payload$.pipe(\n switchMap((url) => fetch$(url)),\n map((value) => action(setValue, value)),\n )\n }),\n }))\n```\n\n#### Import location\n\nAs you can see in the example above, `types` need to be imported from `mst-effect`([Why?](#why-we-need-to-import-types-from-mst-effect)).\n\n#### The definition of the `effect`\n\nThe first parameter is the model instance, as `effect` needs to unsubscribe the [`Observable`](https://rxjs-dev.firebaseapp.com/api/index/class/Observable) when the model is destroyed.\n\nThe second parameter, a factory function, can be thought of as the `Epic` of [redux-observable](https://redux-observable.js.org/docs/basics/Epics.html). The factory function is called only once at model creation. It takes a stream of payloads and returns a stream of actions. — **Payloads in, actions out.**\n\nFinally, `effect` returns a function to feed a new value to the `payload$`. In actual implementation code, it's just an alias to `subject.next`.\n\n#### What is `action`?\n\n`action` can be considered roughly as a higher-order function that takes a callback function and the arguments for the callback function. But instead of executing immediately, it returns a new function. Action will be immediately invoked when emitted.\n\n```ts\nfunction action(callback, ...params): EffectAction {\n return () => callback(...params)\n}\n```\n\n## API Reference\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/effect.ts) effect\n\n`effect` is used to manage subscriptions automatically.\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype EffectDispatcher = (payload: P) => void\n\nfunction effect
(\n self: AnyInstance,\n fn: (payload$: Observable
) => Observable,\n): EffectDispatcher\n```\n\n`payload$` emits data synchronously when the function returned by the effect is called. The returned `Observable` will automatically subscribed by `effect`\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/doll-effect.ts) dollEffect\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype DollEffectDispatcher = (\n payload: P,\n handler?: (resolve$: Observable) => Observable,\n) => Promise\n\ntype SignalDispatcher = (value: S) => void\n\nfunction dollEffect(\n self: AnyInstance,\n fn: (\n payload$: Observable,\n signalDispatcher: SignalDispatcher,\n ) => Observable,\n): DollEffectDispatcher\n```\n\n`dollEffect` is almost identical with `effect`. The primary difference is `DollEffectDispatcher` will return a `Promise` which is useful when you want to report some message to the caller. The `Promise` will fulfill when `SignalDispatcher` being invoked ([example](https://codesandbox.io/s/report-fetch-status-to-caller-d6gmh)). Also, you can use the `handler` to control when and what the `Promise` should resolve ([example](https://codesandbox.io/s/report-fetch-status-to-caller-2-1eogq)).\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/signal/index.ts) signal\n\n```ts\nexport function signal(\n self: AnyInstance,\n fn?: (payload$: Observable) => Observable,\n): [Observable, (payload: P) => void]\n```\n\n`signal` is an encapsulation of the [`Subject`](https://rxjs-dev.firebaseapp.com/api/index/class/Subject). You can use the second parameter to do some processing of the output data.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/reaction$/index.ts) reaction$\n\n```ts\nexport function reaction$(\n expression: (r: IReactionPublic) => T,\n opts?: IReactionOptions,\n): Observable<{ current: T; prev: T; r: IReactionPublic }>\n```\n\n`reaction$` encapsulates the [`reaction`](https://mobx.js.org/reactions.html#reaction) method from `mobx`. When the returned value changes, it will emit the corresponding data to the returned `Observable`.\n\n## Recipes\n\n#### Error Handling\n\nWhen an error occurred in `Observable`, `effect` will re-subscribe the `Observable` (will not re-run the factory function). The common practice is to use the [`catchError`](https://rxjs-dev.firebaseapp.com/api/operators/catchError) operator for error handling. Check [fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx) example for more detail.\n\n#### Cancellation\n\nYou can combine `signal` and [`takeUntil()`](https://rxjs-dev.firebaseapp.com/api/operators/takeUntil) operator to cancel an `Observable`. Check [mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx) example for more detail.\n\n## FAQ\n\n#### Why we need to import `types` from `mst-effect`\n\nCurrently, `mobx-state-tree` does not support modifying the model outside of actions.\n`mst-effect` overrides `types.model` so that the model can be modified in an asynchronous process.\nBecause `mst-effect` re-export all the variables and types in `mobx-state-tree`, you can simply change the import location to `mst-effect`.\n\n```diff\n- import { types, Instance } from 'mobx-state-tree'\n+ import { types, Instance } from 'mst-effect'\n```\n","readmeFilename":"README.md","gitHead":"7d2b5c8f5487f4ef3248c55ad3c392fd1c3cbc68","_id":"mst-effect@1.2.0-alpha.2","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-nIZDGPOv4tVKgNaCJGB+BmG8Fn8br7CmWC2vZlV9cMxer7vXZtAwV4IeTeghvigXlFueMZMHY65zi2exQqYEDQ==","shasum":"bea8a25eb48dbd040672c6c050db969f182d8623","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.2.0-alpha.2.tgz","fileCount":104,"unpackedSize":97926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYIRVCRA9TVsSAnZWagAAjMIQAJD8JqmVi1m1Ph/lZ1ne\np+kDcn3uvAnlmDIjvx8bLvftJmOhlq/WWk8fJxct99qRJ8OwNXwufRi++7Xw\nkfaqKRsl/Zho8tfE6SF9RpT4Z/h0I+a3iecfNlkYYSRIt/H3zYQxhMZM2gz6\ncnBw7Jm3vzn6GlvnDrKCraa6z28V0AwcJhuAyToh56sbSNypUWxbnUhb51y8\nFx4WlXifFQRossVsUBmL9iA8HDA/vc1bczi6ecHK7Un7NsX6ws7JQrTqohEr\nODEZkh2NtxvIJ7vvi19i9/9iweOvqc4Kk/QHmMkGKHiGsOPdahxIHnTyjRQG\nGydlHgFC2ggKvJKc8XMlbYlwSDj5k4JvEpr3sLvim+25WoMt38mnevjPiFZr\nlfwlxPzCLwJGoJrqCjUYKLrodknOGR4nBUL2p/u25gjsfFY3+POaNFs4N9qh\nbQ589AMF9M+wPt7xfoIl6wt8kdoBz20S/IofELVKl4XrHaTDbSPbzizssXzl\nMUdhi6AYIxVTWR5+ZuT0B7E6UEuuih607hdsmKdyK3W0BtXmluURP2M9ErXI\nMjurff7GyiKQOe/d25dTqBowhDA92ChwKuIqZlAuVC64dhBLinBXNBFJVi0d\nQf0uD9m02omG/Md7skWNuR99jaOTF3AByb86lI94F/qFrBl44VcfwHffhIHc\nz4DC\r\n=YZRZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCByDZbFGeFPnd4k3Z2Ftp5/E4CGV782KJEhdUJ2Goz4gIhALk97dudNiPHkFpnFjT55Qn0Ve0R0p9K9z4cA5YOYLBe"}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.2.0-alpha.2_1616938069356_0.8629338557595632"},"_hasShrinkwrap":false},"1.2.0":{"name":"mst-effect","version":"1.2.0","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"gitHead":"cacd864e61339afc88762dcfaf39fd6ac83a3fc2","_id":"mst-effect@1.2.0","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-kem5qxoZpLtjBrz4/QSWFtmSdZM8gv9e8Z2BFFaGu9+frQakyWnhTw6bVKeOwBBjABL41YOKofrMz05Z6CTOCw==","shasum":"039cba22307319f5375aa6b0d108768d13f2db1e","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.2.0.tgz","fileCount":104,"unpackedSize":97918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYIZHCRA9TVsSAnZWagAA/74P/iakZJ2QraJlhozyNTHO\nejUSRl6jnnVln+lBEwjci2M9fllrfhQKU8iuMSaNRWGDu7wSO3BhYiaeDzz5\nWN558WulxF/Cx3nr03Qx2bUJUI/dBdRKTJGM3J0qzS39zUtgutnnRwgDEUaT\n9pJJvfC5ob2yVTMTYWq8eUUVxPLMuiiXmtvZSYigwZdE3kVPyjG9x2slGzsx\n70scfIANuHhDitSVPche4M5RrdyVbOZMySXEWyBp1kE2FfOJfZWZ5+0wT+wM\nElppqI/7DQ61DPyWsler3PrrXW1moB5b/+LFMbt38b5KeJiaGsk8OyUinndb\ndPgClIbDzbLW0qWJmKBerZNH1AJPnFW798ZAcuPR+CSLNIoj7ztE2Il3u8gY\nXaLXxKLtWNki7SzgvOGmSDvSpklbCc9j/f3A5t3Pyqt1CPB2kdSkmToWOJt5\nIdX2HV4ciaNopl5QmNehzAoYi69zsWuEnaQ8htikUPzddlz3/m8C90t+c9ui\n1NTpgQViZ3CEl+BDssos69xORGijT245O7o0NgsbOps1efo+mWppNBqV911V\nXoQBkylT3kstyIjAsiYs3ZPol28bVKCTSijAVVtspCSGfE8EUf/CNPOOBEsF\nP50YzWcczer4sQwTu3AiABplMj3VqDKJtRyFsFRrH117pKOKK+IL/EYYrjY2\nC6jq\r\n=K0Iw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+q22gRoTyAV8+a/OC7IgwgkkG7jERkABdLaVrHF5jeAiEAo+x8ahilV2SY4wuwDhkzlWfEBtIOzZcr+LB07ocu1EY="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.2.0_1616938567131_0.6876629575750612"},"_hasShrinkwrap":false},"1.2.1-alpha.1":{"name":"mst-effect","version":"1.2.1-alpha.1","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","author":{"name":"Runjuu"},"homepage":"https://github.com/Runjuu/mst-effect#readme","repository":{"type":"git","url":"git+https://github.com/Runjuu/mst-effect.git"},"bugs":{"url":"https://github.com/Runjuu/mst-effect/issues"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"readme":"\n \n \n \n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n ![\"Github](\"https://img.shields.io/static/v1?label=discuss%20on&message=github&colorA=373737&colorB=0A70E9&style=flat\")
\n \n
\n\n`mst-effect` is designed to be used with MobX-State-Tree to create asynchronous actions using RxJS. In case you haven't used them before:\n\n> `MobX-State-Tree` is a full-featured reactive state management library that can **structure the state model** super intuitively.\n>
`RxJS` is a library for composing asynchronous and event-based programs that provides the best practice to **manage async codes**.\n\nIf you are still hesitant about learning `RxJS`, check the examples below and play around with them. I assure you that you'll be amazed by what it can do and how clean the code could be.\n\nAlready using `MobX-State-Tree`? Awesome! `mst-effect` is 100% compatible with your current project.\n\n## Examples\n\n- [Fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx)\n- [Fetch with token](https://codesandbox.io/s/fetch-with-token-rbveh?file=/src/app.tsx)\n- [Handle user input](https://codesandbox.io/s/handle-user-input-ef1pt?file=/src/app.tsx)\n- [Mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx)\n- [Back pressure](https://codesandbox.io/s/backpressure-ulu1y?file=/src/app.tsx)\n\n## Installation\n\n`mst-effect` has peer dependencies of [mobx](https://www.npmjs.com/package/mobx), [mobx-state-tree](https://www.npmjs.com/package/mobx-state-tree) and [rxjs](https://www.npmjs.com/package/rxjs), which will have to be installed as well.\n\n##### Using [yarn](https://yarnpkg.com/en/package/mst-effect):\n\n```bash\nyarn add mst-effect\n```\n\n##### Or via [npm](https://www.npmjs.com/package/mst-effect):\n\n```bash\nnpm install mst-effect --save\n```\n\n## Basics\n\n**`effect`** is the core method of `mst-effect`. It can automatically manage subscriptions and execute the emitted actions. For example:\n\n```ts\nimport { types, effect, action } from 'mst-effect'\nimport { map, switchMap } from 'rxjs/operators'\n\nconst Model = types\n .model({\n value: types.string,\n })\n .actions((self) => ({\n fetch: effect(self, (payload$) => {\n function setValue(value: string) {\n self.value = value\n }\n\n return payload$.pipe(\n switchMap((url) => fetch$(url)),\n map((value) => action(setValue, value)),\n )\n }),\n }))\n```\n\n#### Import location\n\nAs you can see in the example above, `types` need to be imported from `mst-effect`([Why?](#why-we-need-to-import-types-from-mst-effect)).\n\n#### The definition of the `effect`\n\nThe first parameter is the model instance, as `effect` needs to unsubscribe the [`Observable`](https://rxjs-dev.firebaseapp.com/api/index/class/Observable) when the model is destroyed.\n\nThe second parameter, a factory function, can be thought of as the `Epic` of [redux-observable](https://redux-observable.js.org/docs/basics/Epics.html). The factory function is called only once at model creation. It takes a stream of payloads and returns a stream of actions. — **Payloads in, actions out.**\n\nFinally, `effect` returns a function to feed a new value to the `payload$`. In actual implementation code, it's just an alias to `subject.next`.\n\n#### What is `action`?\n\n`action` can be considered roughly as a higher-order function that takes a callback function and the arguments for the callback function. But instead of executing immediately, it returns a new function. Action will be immediately invoked when emitted.\n\n```ts\nfunction action(callback, ...params): EffectAction {\n return () => callback(...params)\n}\n```\n\n## API Reference\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/effect.ts) effect\n\n`effect` is used to manage subscriptions automatically.\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype EffectDispatcher = (payload: P) => void\n\nfunction effect
(\n self: AnyInstance,\n fn: (payload$: Observable
) => Observable,\n): EffectDispatcher\n```\n\n`payload$` emits data synchronously when the function returned by the effect is called. The returned `Observable` will automatically subscribed by `effect`\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/doll-effect.ts) dollEffect\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype DollEffectDispatcher = (\n payload: P,\n handler?: (resolve$: Observable) => Observable,\n) => Promise\n\ntype SignalDispatcher = (value: S) => void\n\nfunction dollEffect(\n self: AnyInstance,\n fn: (\n payload$: Observable,\n signalDispatcher: SignalDispatcher,\n ) => Observable,\n): DollEffectDispatcher\n```\n\n`dollEffect` is almost identical with `effect`. The primary difference is `DollEffectDispatcher` will return a `Promise` which is useful when you want to report some message to the caller. The `Promise` will fulfill when `SignalDispatcher` being invoked ([example](https://codesandbox.io/s/report-fetch-status-to-caller-d6gmh?file=/src/app.tsx)). Also, you can use the `handler` to control when and what the `Promise` should resolve ([example](https://codesandbox.io/s/report-fetch-status-to-caller-2-1eogq?file=/src/app.tsx)).\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/signal/index.ts) signal\n\n```ts\nexport function signal(\n self: AnyInstance,\n fn?: (payload$: Observable) => Observable,\n): [Observable, (payload: P) => void]\n```\n\n`signal` is an encapsulation of the [`Subject`](https://rxjs-dev.firebaseapp.com/api/index/class/Subject). You can use the second parameter to do some processing of the output data.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/reaction$/index.ts) reaction$\n\n```ts\nexport function reaction$(\n expression: (r: IReactionPublic) => T,\n opts?: IReactionOptions,\n): Observable<{ current: T; prev: T; r: IReactionPublic }>\n```\n\n`reaction$` encapsulates the [`reaction`](https://mobx.js.org/reactions.html#reaction) method from `mobx`. When the returned value changes, it will emit the corresponding data to the returned `Observable`.\n\n## Recipes\n\n#### Error Handling\n\nWhen an error occurred in `Observable`, `effect` will re-subscribe the `Observable` (will not re-run the factory function). The common practice is to use the [`catchError`](https://rxjs-dev.firebaseapp.com/api/operators/catchError) operator for error handling. Check [fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx) example for more detail.\n\n#### Cancellation\n\nYou can combine `signal` and [`takeUntil()`](https://rxjs-dev.firebaseapp.com/api/operators/takeUntil) operator to cancel an `Observable`. Check [mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx) example for more detail.\n\n## FAQ\n\n#### Why we need to import `types` from `mst-effect`\n\nCurrently, `mobx-state-tree` does not support modifying the model outside of actions.\n`mst-effect` overrides `types.model` so that the model can be modified in an asynchronous process.\nBecause `mst-effect` re-export all the variables and types in `mobx-state-tree`, you can simply change the import location to `mst-effect`.\n\n```diff\n- import { types, Instance } from 'mobx-state-tree'\n+ import { types, Instance } from 'mst-effect'\n```\n","readmeFilename":"README.md","gitHead":"3eaef814dd0a16c89618676ad422c6125e480eb2","_id":"mst-effect@1.2.1-alpha.1","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-OBEuL2UEi1QMNSHTwlyhKPoGb7puhozqckKqzpdtU9Txc7EE6xninymPOOfv3MWUD37/AYvIBM9uNeDQFjkODw==","shasum":"4f2bc02115c011978318e649153ff0f831ee605a","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.2.1-alpha.1.tgz","fileCount":105,"unpackedSize":100353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJGSCRA9TVsSAnZWagAASZ8P/jct+AVVtzu1Bqz7qo1b\nq9r6HicYD/evmlJlTRoGgrf92Fm6FBYFhR2NNDnPEUadgY76QcPA9TudYDlK\nFddSRp9cn5ReYLMx3jhvWaOj4UpcA6Kqavb7WQtiZWZBZAAPdM9RaJXqwsTY\nAUtZLTfdAJVCbsgIiIfMEZ3IBx8bf3b5lKtQFfVyxwOQxUPKUOZ/QCigC9+q\nj/68FQlKpnUUaBQB05LEzQsPuTnHldVsQnXD98xGJ5yMbyNJbcdBB8Ur+15K\nYHbihXOkfkl/kxsYgYt2Um4b+ohRNkxUj3t9hwdOY7mP5uOtwiV8MSYfxMP3\n2Ywx31bR/jPVl2nNQZyD9x5AlQO8k20otU49JbsWyrZvzk9mi5Kv46bcT+NT\nGBJ4yMFDH6Y1JrgxarhR1xrGU+FSqWGikiK2hrd/dWlFM1aVInmZdAMDNB4E\nmSTuEf3T2uJBtHJfuoiaPMDNXAb52xES1q1MxV3b6MAWoib1rattTN3syToq\n0Bu7vB71kTu/zCNvbDPORM4WuSot7Lfq6B3vs64X5lwfnG/ekwZgoO+JP/5L\nqQczE7WeOoeVT6EprDzL+BLEbWwgNAWS14wGib5Np503K2zUlzo6MGPP6hap\nwH5oVXPmkfG0699usZdkIRWz+0XM0higFDpnhpLdhrcPJmRMzKWnE0FHpttn\n3lzC\r\n=ZVGa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGb8UeESkB1KL1u8gbwZk+pHBkr6CFSJPHx9nISIV/NgIhAJlSPxNg3+WERWS5f1t1+wwZhSWUSRQAxUZOKA50+ak6"}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.2.1-alpha.1_1622446482273_0.8469265307183298"},"_hasShrinkwrap":false},"1.2.1-alpha.2":{"name":"mst-effect","version":"1.2.1-alpha.2","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","author":{"name":"Runjuu"},"homepage":"https://github.com/Runjuu/mst-effect#readme","repository":{"type":"git","url":"git+https://github.com/Runjuu/mst-effect.git"},"bugs":{"url":"https://github.com/Runjuu/mst-effect/issues"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"readme":"\n \n \n \n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n`mst-effect` is designed to be used with MobX-State-Tree to create asynchronous actions using RxJS. In case you haven't used them before:\n\n> `MobX-State-Tree` is a full-featured reactive state management library that can **structure the state model** super intuitively.\n>
`RxJS` is a library for composing asynchronous and event-based programs that provides the best practice to **manage async codes**.\n\nIf you are still hesitant about learning `RxJS`, check the examples below and play around with them. I assure you that you'll be amazed by what it can do and how clean the code could be.\n\nAlready using `MobX-State-Tree`? Awesome! `mst-effect` is 100% compatible with your current project.\n\n## Examples\n\n- [Fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx)\n- [Fetch with token](https://codesandbox.io/s/fetch-with-token-rbveh?file=/src/app.tsx)\n- [Handle user input](https://codesandbox.io/s/handle-user-input-ef1pt?file=/src/app.tsx)\n- [Mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx)\n- [Back pressure](https://codesandbox.io/s/backpressure-ulu1y?file=/src/app.tsx)\n\n## Installation\n\n`mst-effect` has peer dependencies of [mobx](https://www.npmjs.com/package/mobx), [mobx-state-tree](https://www.npmjs.com/package/mobx-state-tree) and [rxjs](https://www.npmjs.com/package/rxjs), which will have to be installed as well.\n\n##### Using [yarn](https://yarnpkg.com/en/package/mst-effect):\n\n```bash\nyarn add mst-effect\n```\n\n##### Or via [npm](https://www.npmjs.com/package/mst-effect):\n\n```bash\nnpm install mst-effect --save\n```\n\n## Basics\n\n**`effect`** is the core method of `mst-effect`. It can automatically manage subscriptions and execute the emitted actions. For example:\n\n```ts\nimport { types, effect, action } from 'mst-effect'\nimport { map, switchMap } from 'rxjs/operators'\n\nconst Model = types\n .model({\n value: types.string,\n })\n .actions((self) => ({\n fetch: effect(self, (payload$) => {\n function setValue(value: string) {\n self.value = value\n }\n\n return payload$.pipe(\n switchMap((url) => fetch$(url)),\n map((value) => action(setValue, value)),\n )\n }),\n }))\n```\n\n#### Import location\n\nAs you can see in the example above, `types` need to be imported from `mst-effect`([Why?](#why-we-need-to-import-types-from-mst-effect)).\n\n#### The definition of the `effect`\n\nThe first parameter is the model instance, as `effect` needs to unsubscribe the [`Observable`](https://rxjs-dev.firebaseapp.com/api/index/class/Observable) when the model is destroyed.\n\nThe second parameter, a factory function, can be thought of as the `Epic` of [redux-observable](https://redux-observable.js.org/docs/basics/Epics.html). The factory function is called only once at model creation. It takes a stream of payloads and returns a stream of actions. — **Payloads in, actions out.**\n\nFinally, `effect` returns a function to feed a new value to the `payload$`. In actual implementation code, it's just an alias to `subject.next`.\n\n#### What is `action`?\n\n`action` can be considered roughly as a higher-order function that takes a callback function and the arguments for the callback function. But instead of executing immediately, it returns a new function. Action will be immediately invoked when emitted.\n\n```ts\nfunction action(callback, ...params): EffectAction {\n return () => callback(...params)\n}\n```\n\n## API Reference\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/effect.ts) effect\n\n`effect` is used to manage subscriptions automatically.\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype EffectDispatcher = (payload: P) => void\n\nfunction effect
(\n self: AnyInstance,\n fn: (payload$: Observable
) => Observable,\n): EffectDispatcher\n```\n\n`payload$` emits data synchronously when the function returned by the effect is called. The returned `Observable` will automatically subscribed by `effect`\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/doll-effect.ts) dollEffect\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype DollEffectDispatcher = (\n payload: P,\n handler?: (resolve$: Observable) => Observable,\n) => Promise\n\ntype SignalDispatcher = (value: S) => void\n\nfunction dollEffect(\n self: AnyInstance,\n fn: (\n payload$: Observable,\n signalDispatcher: SignalDispatcher,\n ) => Observable,\n): DollEffectDispatcher\n```\n\n`dollEffect` is almost identical with `effect`. The primary difference is `DollEffectDispatcher` will return a `Promise` which is useful when you want to report some message to the caller. The `Promise` will fulfill when `SignalDispatcher` being invoked ([example](https://codesandbox.io/s/report-fetch-status-to-caller-d6gmh?file=/src/app.tsx)). Also, you can use the `handler` to control when and what the `Promise` should resolve ([example](https://codesandbox.io/s/report-fetch-status-to-caller-2-1eogq?file=/src/app.tsx)).\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/signal/index.ts) signal\n\n```ts\nexport function signal(\n self: AnyInstance,\n fn?: (payload$: Observable) => Observable,\n): [Observable, (payload: P) => void]\n```\n\n`signal` is an encapsulation of the [`Subject`](https://rxjs-dev.firebaseapp.com/api/index/class/Subject). You can use the second parameter to do some processing of the output data.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/reaction$/index.ts) reaction$\n\n```ts\nexport function reaction$(\n expression: (r: IReactionPublic) => T,\n opts?: IReactionOptions,\n): Observable<{ current: T; prev: T; r: IReactionPublic }>\n```\n\n`reaction$` encapsulates the [`reaction`](https://mobx.js.org/reactions.html#reaction) method from `mobx`. When the returned value changes, it will emit the corresponding data to the returned `Observable`.\n\n## Recipes\n\n#### Error Handling\n\nWhen an error occurred in `Observable`, `effect` will re-subscribe the `Observable` (will not re-run the factory function). The common practice is to use the [`catchError`](https://rxjs-dev.firebaseapp.com/api/operators/catchError) operator for error handling. Check [fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx) example for more detail.\n\n#### Cancellation\n\nYou can combine `signal` and [`takeUntil()`](https://rxjs-dev.firebaseapp.com/api/operators/takeUntil) operator to cancel an `Observable`. Check [mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx) example for more detail.\n\n## FAQ\n\n#### Why we need to import `types` from `mst-effect`\n\nCurrently, `mobx-state-tree` does not support modifying the model outside of actions.\n`mst-effect` overrides `types.model` so that the model can be modified in an asynchronous process.\nBecause `mst-effect` re-export all the variables and types in `mobx-state-tree`, you can simply change the import location to `mst-effect`.\n\n```diff\n- import { types, Instance } from 'mobx-state-tree'\n+ import { types, Instance } from 'mst-effect'\n```\n","readmeFilename":"README.md","gitHead":"d29eb72b5b5f37dada0fdb2db7b27a5916a3d48f","_id":"mst-effect@1.2.1-alpha.2","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-imBZnNT1kEqPhe3v7zrOqJH0mqCRptCyGwSMwrK65k5E/bU8pw9m3w5PnI0A7YBksDc6t/lTxvsKqHtxnvbG0Q==","shasum":"8d253bded5de4b1ed927cdd856c9204f0648248c","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.2.1-alpha.2.tgz","fileCount":105,"unpackedSize":101219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJTKCRA9TVsSAnZWagAAh2UP/0bQJb8ykHj5td97b31H\nt6J37soMZS7Hn2fF8R562nOZE8YfztjDMWmDs4VPkszGPg2dBp+MrVnHC2Vr\nJxyB7njZPoQwubvKAyGykFZdNvcT3PcPfG9IkpAkiPv1mau8fjI1ceeSbPPS\n8DiRMoN4h9Kt+deAMZq7aYjhlIo1QyLvEUPXbfdZUyz+85aU5zCfjGXqF+rl\nxxrARq+uDYOmCEMUqObAHDHgppXb6geZv2Q79DwV4UHfcsKro+AQcQviBlOD\n+MAuV2KMot0aHI4cR9w6IKxwbdyj9Jjnz7uPYeFk12Mm6+3s9zJ9D3YyNXJv\nvatPSH0mJ7Zo6OoQfbbNc/1TmNPbS0wkpSAJiZAB3aoodA1y4Tb2rRHybgEe\n1fNc9H1z6zahooBtpz0uM0T8avm7yu/Ko2O4fek+GhmMc0fFj56BeNHTgSY9\nGWqN8F6qCUG55Q8LaYBM8fQe0kFeJOQRi8zJu9zNzz3ZUnX0IknL9EpAEUvk\nYknJjPb/p1EJE1HXpQwwdJIGD9QJcFZ4pUT9kfeOjLsM123e5fhR+j2voQ20\nYwfERvNbbPnAzHopXAz7EEp07pNKoMMTsiHeKRDcfGM5fRabtepDba1pAhLq\nT5SgCggcavhzrTPhy/l6PL+3/sX8Jymt2StPmShH2W7272nO5IlaVcZF/9E6\nMf2z\r\n=JmqG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvRJqmX8SkQORoaA+uLXD+k4o3wODYB7p+2J5QF7TPQAiEAwgS9dcNgyDqXmU6+GFqtrrIvvWRMLZ78wN46BJv0qCE="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.2.1-alpha.2_1622447306140_0.4121484499086472"},"_hasShrinkwrap":false},"1.2.1":{"name":"mst-effect","version":"1.2.1","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Runjuu/mst-effect.git"},"bugs":{"url":"https://github.com/Runjuu/mst-effect/issues"},"homepage":"https://github.com/Runjuu/mst-effect#readme","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^6.0.0"},"devDependencies":{"@types/jest":"^26.0.20","@typescript-eslint/eslint-plugin":"^4.18.0","@typescript-eslint/parser":"^4.18.0","eslint":"^7.22.0","eslint-config-prettier":"^8.1.0","eslint-plugin-prettier":"^3.3.1","eslint-plugin-react":"^7.22.0","format-package":"^6.1.0","husky":"^5.1.3","jest":"^26.6.3","lint-staged":"^10.5.4","mobx":"^6.1.8","mobx-state-tree":"^5.0.1","npm-run-all":"^4.1.5","prettier":"^2.2.1","rxjs":"^6.6.6","ts-jest":"^26.5.3","ts-node":"^9.1.1","tsd":"^0.14.0","tslib":"^2.1.0","typescript":"^4.2.3"},"gitHead":"8c486a5df706f01b3fe97577696a55e7e448376f","_id":"mst-effect@1.2.1","_nodeVersion":"12.19.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-nNRMvlhvoSe3DbppdedQ5tDRV4meojc34ZMzDsxXTB4qcTGigzkfd2yYImKNLoEzSy4wgiwJoo0svcvyMzIUsA==","shasum":"514137bb9458ae76cae537a0ba423fb5a5abda8a","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.2.1.tgz","fileCount":105,"unpackedSize":101211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtJbQCRA9TVsSAnZWagAAQaYP/Rvoqse17fnQVl6WID+m\nWHO4tzgxc9R19v/1WNMkhzxjkGUiRkbCUQY25cZ/YVpH8/unXCyDNip0BeNQ\nO1kqHlMziflCnqtlPg/6SCDTv/gvfeT3f5Ahf9qDPMlqUcUoCaODhkTyBlki\nKtPEBdX1KnLljOC3ywRV4DHRYvvzqCvRl7yzNed7VsXHqYYBV0oOmzIUlj8A\nGBcRhU1eUdVCh11mxlgI4yiQWWTkL5dwxyRlEnGNJCsgIBAOVltlAC2lXToA\n6KrPXswo9S1DxuH31Pxy94cvn4FMO2MeNGP7DdsXQDcDDl5bXoKiyRcnI2sd\nyqlESuSQtA6kJmbbanU1HjKfI71by4L/ri0QxOw2xPyEMOZ9XlctwFxx8Wlu\n7CvIUsFgN5IQvoPXFru6wa+56kn20HeBoIz2RZsNsN8Fk2wUD/btCySkkrkp\nHdcM/tmfjVX7ANGTR7KgS+IuXxKCJ8lmKDic6QW795JNWr8S3QdFfxqaxIgg\nKcp6W0/c5/QXrg36V4YufBzfeEAtKeuhvF5Mp2495D1x9WZ35bL8yHX6I84q\nutWbNe/ZfwqTftK3j0zxn0LcZIWnsZDCf0UAUlK7lhVlPh+eES1X6u4SZviE\nZ+mhlwLJ2zKEQ9bnsS3hpZj8/CfhAtFBZsbmtxHrCrWBciOxzRczFb/IcHQu\npn/0\r\n=1tNN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTZbD2Cg6leqtBjtqg/uhPNqQswNgw+eXBXJlCufj1fAiEA8joPTc3Z4sFVCKaWrjelBkn74nprr+zUxb5C5k6Fh2c="}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.2.1_1622447824119_0.6885260815841716"},"_hasShrinkwrap":false},"1.3.0":{"name":"mst-effect","version":"1.3.0","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Runjuu/mst-effect.git"},"bugs":{"url":"https://github.com/Runjuu/mst-effect/issues"},"homepage":"https://github.com/Runjuu/mst-effect#readme","author":{"name":"Runjuu"},"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","typings":"dist/esm/index.d.ts","sideEffects":false,"scripts":{"build":"yarn run clean && run-p build:cjs build:esm","build:cjs":"tsc -p tsconfig.build.json -m CommonJS --outDir dist/cjs","build:esm":"tsc -p tsconfig.build.json -m ESNext --outDir dist/esm","clean":"rm -rf ./dist","format":"run-p format:code format:package","format:code":"prettier 'src/**/*.@(ts|tsx|html|json)' --write","format:package":"format-package 'package.json' -w -c format-package.json","lint":"run-p lint:eslint lint:tsc","lint:eslint":"eslint . --ext .ts,.tsx --fix --max-warnings 0","lint:tsc":"tsc -p tsconfig.json --noEmit --composite false","prepare":"husky install","prepublish":"run-s lint test build","test":"jest"},"peerDependencies":{"mobx":"^6.0.0 || ^5.0.0","mobx-state-tree":"^5.0.0 || ^4.0.0","rxjs":"^7.0.0 || 6.0.0"},"devDependencies":{"@types/jest":"^27.0.3","@typescript-eslint/eslint-plugin":"^5.8.0","@typescript-eslint/parser":"^5.8.0","eslint":"^8.5.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.28.0","format-package":"^6.1.0","husky":"^7.0.4","jest":"^27.4.5","lint-staged":"^12.1.4","mobx":"^6.3.10","mobx-state-tree":"^5.1.0","npm-run-all":"^4.1.5","prettier":"^2.5.1","rxjs":"^7.4.0","ts-jest":"^27.1.2","ts-node":"^10.4.0","tsd":"^0.19.0","tslib":"^2.3.1","typescript":"^4.5.4"},"gitHead":"c6e7448a362c779faf58278fcf822379fab590a2","_id":"mst-effect@1.3.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-KBlhOw/aYbNe7Fb39BNqORRYNg1AOgrQFiHQRZnBn8jzS3gKzbgBgCKu6bCdlXqh1kThwprwiUcw53YtA552bw==","shasum":"b5534f6e5bd0e3c4c81b54bf35c53d3dad404ccd","tarball":"https://registry.npmjs.org/mst-effect/-/mst-effect-1.3.0.tgz","fileCount":105,"unpackedSize":101173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxq41CRA9TVsSAnZWagAAR/sQAKQ8kCggW3IRLdJQGo2A\n63Dcmq6A0G2be4SZagoH9maUvC+hglhNUNmvg4zuQduvNtOV+w175J4vOnSr\nOs/k1vTQ03jOedPCT4rG5lYlu5o47m5JjZ5AOOlKQUT+gJ72YJ7rEmt3YTe+\nqKdetrdOwAzLGshzP0t+gViov3bA0c1tWYB7n9ociwOW240U5Uzv6ev017mh\nQkQCgIiCnnM1pc26jskDL4XuL/JjUGD1P9GhsWrRikRuGscruA2lJLQ6wrdE\n+qEsEAtilgL/k47EBaQ/UVSxsViCqTzotwSb68dAsd6q38aElrrDjAykyrtJ\nwy0j0KLUFFyHDyfCNVrtOzhvvL8pkeL8y7Sbk+MZ+26+dy+Nv0Y4tbW7bbfm\nX7pc4+kfr5pW2PmiLXl6t3Mr1qj0zR9AUDsLTrt0tbSGFr0/GaJS5BcCEB31\naARdW4bAlLAp3EwQJQyTJur39CPbjYvaGM22hhM4q/J144YMhZqx4bJGKCiv\nPbIYW/MqeK4NcZZ0ohn7eUfv54jeTQ7Nj861ZILdK89gdkNuf/YLNLKDScsJ\nuZxNhOjF6jqhA/zMB2WgWKgdu7dySemI79WdbyekRICQhyuXEW+qV31Fm3pO\nrSvK8U8iMY+RLJxy7amxXxzXN7A/sDzGs+zwxYTICxLuXCmk4N+QrmebaqFv\nhnZx\r\n=rbsI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVC8Jhm9baND/MJkP3ytEjGaKD1AXx5t2JixITxochkQIhAPoNJ39e0sRdh2llM4F9H8a9OeYduD0miEfjf4RHS65n"}]},"_npmUser":{"name":"runjuu","email":"hi@runjuu.com"},"directories":{},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mst-effect_1.3.0_1640410676894_0.5387996066144765"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-19T09:25:55.346Z","0.0.1":"2020-07-19T09:25:55.504Z","modified":"2022-05-09T23:20:46.934Z","0.0.2":"2021-02-01T08:23:42.873Z","0.0.3-alpha.0":"2021-02-18T15:59:36.442Z","0.0.3-alpha.1":"2021-02-18T16:01:40.889Z","0.0.3-alpha.2":"2021-02-19T04:09:45.068Z","0.0.3-alpha.3":"2021-03-08T08:46:16.308Z","0.0.3-alpha.4":"2021-03-08T15:46:40.836Z","0.0.3-alpha.5":"2021-03-09T14:45:03.778Z","0.0.3":"2021-03-09T14:49:02.177Z","0.0.4-alpha.1":"2021-03-13T16:09:22.372Z","0.0.4-alpha.2":"2021-03-14T03:32:13.643Z","0.0.4-alpha.3":"2021-03-15T03:42:22.100Z","0.0.4":"2021-03-15T03:55:20.832Z","0.0.5-alpha.1":"2021-03-16T02:18:18.014Z","0.0.5":"2021-03-16T14:53:00.332Z","1.0.0":"2021-03-17T03:51:13.693Z","1.0.1-alpha.1":"2021-03-21T14:12:02.498Z","1.0.1":"2021-03-21T14:23:14.631Z","1.0.2":"2021-03-27T13:45:00.373Z","1.1.0-alpha.1":"2021-03-28T09:37:18.601Z","1.1.0-alpha.2":"2021-03-28T09:56:52.044Z","1.1.0":"2021-03-28T10:04:57.922Z","1.1.1":"2021-03-28T10:16:17.212Z","1.2.0-alpha.1":"2021-03-28T11:20:07.952Z","1.2.0-alpha.2":"2021-03-28T13:27:49.521Z","1.2.0":"2021-03-28T13:36:07.340Z","1.2.1-alpha.1":"2021-05-31T07:34:42.414Z","1.2.1-alpha.2":"2021-05-31T07:48:26.308Z","1.2.1":"2021-05-31T07:57:04.227Z","1.3.0":"2021-12-25T05:37:57.060Z"},"maintainers":[{"name":"runjuu","email":"hi@runjuu.com"}],"keywords":["Rx","RxJS","ReactiveX","ReactiveExtensions","Streams","Observables","Observable","Stream","mobx","mobx-state-tree","promise","reactive","frp","functional-reactive-programming","state management"],"author":{"name":"Runjuu"},"license":"MIT","readme":"\n \n \n \n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n`mst-effect` is designed to be used with MobX-State-Tree to create asynchronous actions using RxJS. In case you haven't used them before:\n\n> `MobX-State-Tree` is a full-featured reactive state management library that can **structure the state model** super intuitively.\n>
`RxJS` is a library for composing asynchronous and event-based programs that provides the best practice to **manage async codes**.\n\nIf you are still hesitant about learning `RxJS`, check the examples below and play around with them. I assure you that you'll be amazed by what it can do and how clean the code could be.\n\nAlready using `MobX-State-Tree`? Awesome! `mst-effect` is 100% compatible with your current project.\n\n## Examples\n\n- [Fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx)\n- [Fetch with token](https://codesandbox.io/s/fetch-with-token-rbveh?file=/src/app.tsx)\n- [Handle user input](https://codesandbox.io/s/handle-user-input-ef1pt?file=/src/app.tsx)\n- [Mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx)\n- [Back pressure](https://codesandbox.io/s/backpressure-ulu1y?file=/src/app.tsx)\n\n## Installation\n\n`mst-effect` has peer dependencies of [mobx](https://www.npmjs.com/package/mobx), [mobx-state-tree](https://www.npmjs.com/package/mobx-state-tree) and [rxjs](https://www.npmjs.com/package/rxjs), which will have to be installed as well.\n\n##### Using [yarn](https://yarnpkg.com/en/package/mst-effect):\n\n```bash\nyarn add mst-effect\n```\n\n##### Or via [npm](https://www.npmjs.com/package/mst-effect):\n\n```bash\nnpm install mst-effect --save\n```\n\n## Basics\n\n**`effect`** is the core method of `mst-effect`. It can automatically manage subscriptions and execute the emitted actions. For example:\n\n```ts\nimport { types, effect, action } from 'mst-effect'\nimport { map, switchMap } from 'rxjs/operators'\n\nconst Model = types\n .model({\n value: types.string,\n })\n .actions((self) => ({\n fetch: effect(self, (payload$) => {\n function setValue(value: string) {\n self.value = value\n }\n\n return payload$.pipe(\n switchMap((url) => fetch$(url)),\n map((value) => action(setValue, value)),\n )\n }),\n }))\n```\n\n#### Import location\n\nAs you can see in the example above, `types` need to be imported from `mst-effect`([Why?](#why-we-need-to-import-types-from-mst-effect)).\n\n#### The definition of the `effect`\n\nThe first parameter is the model instance, as `effect` needs to unsubscribe the [`Observable`](https://rxjs-dev.firebaseapp.com/api/index/class/Observable) when the model is destroyed.\n\nThe second parameter, a factory function, can be thought of as the `Epic` of [redux-observable](https://redux-observable.js.org/docs/basics/Epics.html). The factory function is called only once at model creation. It takes a stream of payloads and returns a stream of actions. — **Payloads in, actions out.**\n\nFinally, `effect` returns a function to feed a new value to the `payload$`. In actual implementation code, it's just an alias to `subject.next`.\n\n#### What is `action`?\n\n`action` can be considered roughly as a higher-order function that takes a callback function and the arguments for the callback function. But instead of executing immediately, it returns a new function. Action will be immediately invoked when emitted.\n\n```ts\nfunction action(callback, ...params): EffectAction {\n return () => callback(...params)\n}\n```\n\n## API Reference\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/effect.ts) effect\n\n`effect` is used to manage subscriptions automatically.\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype EffectDispatcher = (payload: P) => void\n\nfunction effect
(\n self: AnyInstance,\n fn: (payload$: Observable
) => Observable,\n): EffectDispatcher\n```\n\n`payload$` emits data synchronously when the function returned by the effect is called. The returned `Observable` will automatically subscribed by `effect`\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/effect/doll-effect.ts) dollEffect\n\n```ts\ntype ValidEffectActions = EffectAction | EffectAction[]\n\ntype DollEffectDispatcher = (\n payload: P,\n handler?: (resolve$: Observable) => Observable,\n) => Promise\n\ntype SignalDispatcher = (value: S) => void\n\nfunction dollEffect(\n self: AnyInstance,\n fn: (\n payload$: Observable,\n signalDispatcher: SignalDispatcher,\n ) => Observable,\n): DollEffectDispatcher\n```\n\n`dollEffect` is almost identical with `effect`. The primary difference is `DollEffectDispatcher` will return a `Promise` which is useful when you want to report some message to the caller. The `Promise` will fulfill when `SignalDispatcher` being invoked ([example](https://codesandbox.io/s/report-fetch-status-to-caller-d6gmh?file=/src/app.tsx)). Also, you can use the `handler` to control when and what the `Promise` should resolve ([example](https://codesandbox.io/s/report-fetch-status-to-caller-2-1eogq?file=/src/app.tsx)).\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/signal/index.ts) signal\n\n```ts\nexport function signal(\n self: AnyInstance,\n fn?: (payload$: Observable) => Observable,\n): [Observable, (payload: P) => void]\n```\n\n`signal` is an encapsulation of the [`Subject`](https://rxjs-dev.firebaseapp.com/api/index/class/Subject). You can use the second parameter to do some processing of the output data.\n\n### [👾](https://github.com/Runjuu/mst-effect/blob/main/src/reaction$/index.ts) reaction$\n\n```ts\nexport function reaction$(\n expression: (r: IReactionPublic) => T,\n opts?: IReactionOptions,\n): Observable<{ current: T; prev: T; r: IReactionPublic }>\n```\n\n`reaction$` encapsulates the [`reaction`](https://mobx.js.org/reactions.html#reaction) method from `mobx`. When the returned value changes, it will emit the corresponding data to the returned `Observable`.\n\n## Recipes\n\n#### Error Handling\n\nWhen an error occurred in `Observable`, `effect` will re-subscribe the `Observable` (will not re-run the factory function). The common practice is to use the [`catchError`](https://rxjs-dev.firebaseapp.com/api/operators/catchError) operator for error handling. Check [fetch data](https://codesandbox.io/s/fetch-data-i9hqb?file=/src/app.tsx) example for more detail.\n\n#### Cancellation\n\nYou can combine `signal` and [`takeUntil()`](https://rxjs-dev.firebaseapp.com/api/operators/takeUntil) operator to cancel an `Observable`. Check [mutually exclusive actions](https://codesandbox.io/s/mutually-exclusive-actions-ylqlf?file=/src/app.tsx) example for more detail.\n\n## FAQ\n\n#### Why we need to import `types` from `mst-effect`\n\nCurrently, `mobx-state-tree` does not support modifying the model outside of actions.\n`mst-effect` overrides `types.model` so that the model can be modified in an asynchronous process.\nBecause `mst-effect` re-export all the variables and types in `mobx-state-tree`, you can simply change the import location to `mst-effect`.\n\n```diff\n- import { types, Instance } from 'mobx-state-tree'\n+ import { types, Instance } from 'mst-effect'\n```\n","readmeFilename":"README.md","description":"Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.","homepage":"https://github.com/Runjuu/mst-effect#readme","repository":{"type":"git","url":"git+https://github.com/Runjuu/mst-effect.git"},"bugs":{"url":"https://github.com/Runjuu/mst-effect/issues"}}
![\"Github](\"https://img.shields.io/static/v1?label=chat&message=on%20github%20discussions&colorA=373737&colorB=0A70E9&style=flat\")