{"id":15631634,"url":"https://github.com/janrywang/redux-callbag","last_synced_at":"2025-06-12T07:37:11.930Z","repository":{"id":57350376,"uuid":"126977614","full_name":"janryWang/redux-callbag","owner":"janryWang","description":"🕺🕺Redux middleware for action side effects with callbag 👉\u003c 1KB","archived":false,"fork":false,"pushed_at":"2018-06-29T14:25:44.000Z","size":109,"stargazers_count":182,"open_issues_count":1,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-09T19:17:52.517Z","etag":null,"topics":["callbag","callbags","observable","react","reactive","redux","redux-middleware"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/janryWang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-27T11:41:15.000Z","updated_at":"2023-12-23T07:44:17.000Z","dependencies_parsed_at":"2022-08-28T19:01:30.632Z","dependency_job_id":null,"html_url":"https://github.com/janryWang/redux-callbag","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/janryWang/redux-callbag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Fredux-callbag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Fredux-callbag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Fredux-callbag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Fredux-callbag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janryWang","download_url":"https://codeload.github.com/janryWang/redux-callbag/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janryWang%2Fredux-callbag/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259421244,"owners_count":22854766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["callbag","callbags","observable","react","reactive","redux","redux-middleware"],"created_at":"2024-10-03T10:41:04.587Z","updated_at":"2025-06-12T07:37:11.887Z","avatar_url":"https://github.com/janryWang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/redux-callbag.svg)](https://badge.fury.io/js/redux-callbag)\n[![Build Status](https://travis-ci.org/janryWang/redux-callbag.svg)](https://travis-ci.org/janryWang/redux-callbag)\n\n# \u003cimg src=\"./logo.jpg\" width=\"400\"\u003e\n\n\u003e Redux middleware for action side effects with [callbag](https://github.com/callbag/callbag)\n\u003e\n\u003e You may not need redux-saga/redux-observable. When you use redux-callbag, you will find that this's what you want.\n\u003e\n\u003e - 🙀 Minisize\n\u003e - 🙀 Scalable\n\u003e - 🙀 Easy to understand\n\n\n\n## Install\n\n```sh\nnpm install --save  redux-callbag\n```\n\n## Try it online\n\n- [async-redux-callbag](https://codesandbox.io/s/20n7npjnj)\n\n\n\n## Usage\n\n```js\nimport { createStore, applyMiddleware } from \"redux\"\nimport { pipe, filter, forEach, map } from \"callbag-basics\"\nimport createCallbagMiddleware from \"./index\"\nimport delay from 'callbag-delay'\n\nconst  todos = (state = [], action)=\u003e {\n    switch (action.type) {\n        case \"ADD_TODO\":\n            return state.concat([action.payload])\n        case \"REMOVE_TODO\":\n            return []\n        case \"ADD_SOMETHING\":\n            return state.concat([action.payload])\n        default:\n            return state\n    }\n}\n\nconst addTodo = (payload)=\u003e {\n    return {\n        type: \"ADD_TODO\",\n        payload\n    }\n}\n\nconst addSomething = (payload)=\u003e {\n    return {\n        type: \"ADD_SOMETHING\",\n        payload\n    }\n}\n\nconst removeTodo = ()=\u003e {\n    return {\n        type: \"REMOVE_TODO\"\n    }\n}\n\n\n\nconst store = createStore(\n    todos,\n    [\"Hello world\"],\n    applyMiddleware(\n        createCallbagMiddleware((actions, store) =\u003e {\n            const {\n                select,\n                mapPromise,\n                mapSuccessTo,\n                mapFailTo\n            } = actions\n            \n            actions\n                |\u003e select(\"ADD_SOMETHING\")\n                |\u003e delay(1000)\n                |\u003e forEach(({ payload }) =\u003e {\n                    console.log(\"log:\" + payload)\n                })\n\n            actions\n                |\u003e select(\"ADD_TODO\")\n                |\u003e delay(1000)\n                |\u003e mapPromise((d)=\u003efetch('/xxxx',{data:d}).then(res=\u003eres.json()))\n                |\u003e mapSuccessTo(\"ADD_SOMETHING\",(payload)=\u003epayload + \"  23333333\")\n        })\n    )\n)\n\nstore.dispatch(addTodo(\"Hello redux\"))\nstore.dispatch(addSomething(\"This will not add numbers\"))\n\nconsole.log(store.getState())\n\nstore.subscribe(()=\u003e{\n    console.log(store.getState())\n})\n\n\n```\n\n\n\n## API\n\n\n\n#### `createCallbagMiddleware([...epics : Array\u003c(actions : Function,store : Object) {} ：any\u003e]) : Function`\n\n\u003e This API is used to create middleware\n\n\n\n#### `actions.select([...actionType : String]) : Function`\n\n\u003e This API is used to select action\n\u003e\n\u003e If action-type is undefined, it is equivalent to select to initialize the action, as you can pass multiple action-types\n\n\n\n#### `actions.mapPromise(mapFn : Function\u003c(payload : any) {} : any\u003e) : Function `\n\n\u003e This API is used to insert promise flow\n\n\n\n#### `actions.mapSuccessTo(actionType : String , [mapFn : Function\u003c(payload : any) {} : any])`\n\n\u003e This API is used to dispatch action when callbags chain is successed\n\n\n\n#### `actions.mapFailTo(actionType : String , [mapFn : Function\u003c(payload : any) {} : any])`\n\n\u003e This API is used to dispatch action when callbags chain is failed\n\n\n\n## Q/A\n\n\n\n#### How to use pipline operator syntax?\n\nYou can install the latest version of babel7(@babel/cli), and use @babel/plugin-proposal-pipeline-operator.\n\n\n\n### LICENSE\n\nThe MIT License (MIT)\n\nCopyright (c) 2018 JanryWang\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanrywang%2Fredux-callbag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjanrywang%2Fredux-callbag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjanrywang%2Fredux-callbag/lists"}