{"id":18548045,"url":"https://github.com/khalillechelt/flow-state","last_synced_at":"2025-04-09T21:32:08.199Z","repository":{"id":8905541,"uuid":"60177730","full_name":"khalillechelt/flow-state","owner":"khalillechelt","description":"UI state management with RxJS.","archived":false,"fork":false,"pushed_at":"2022-02-12T10:21:22.000Z","size":4507,"stargazers_count":34,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T03:56:24.406Z","etag":null,"topics":["dispatch-actions","payload","reducer","rxjs","state-management","state-stream","unidirectional-dataflow"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/khalillechelt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-01T13:07:05.000Z","updated_at":"2024-06-19T06:31:46.000Z","dependencies_parsed_at":"2022-08-07T05:00:15.927Z","dependency_job_id":null,"html_url":"https://github.com/khalillechelt/flow-state","commit_stats":null,"previous_names":["kahlil/oddstream","khalillechelt/flow-state"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khalillechelt%2Fflow-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khalillechelt%2Fflow-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khalillechelt%2Fflow-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khalillechelt%2Fflow-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/khalillechelt","download_url":"https://codeload.github.com/khalillechelt/flow-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248114789,"owners_count":21050113,"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":["dispatch-actions","payload","reducer","rxjs","state-management","state-stream","unidirectional-dataflow"],"created_at":"2024-11-06T20:32:55.816Z","updated_at":"2025-04-09T21:32:07.865Z","avatar_url":"https://github.com/khalillechelt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlowState 🌊\n\nDead simple Redux and redux-observable library built with RxJS streams. This is an easy way to introduce a stream-based unidirectional dataflow into your app.\n\n## Highlights\n\n- Inspired by Redux and redux-observable\n- The state is delivered with streams\n- Reducers are just functions, no switch-case\n- Isolate side effects that map back to actions\n\n## Install\n\n`npm install @kahlil/flow-state`\n\n## Usage\n\n```js\nimport { createFlowState } from '@kahlil/flow-state';\n\nconst flowState = createFlowState();\n```\n\n### Dispatch Actions\nIn your components dispatch actions by passing the action constant and optionally\nan action payload. The payload can be any value.\n\n```js\nflowState.dispatch({ type: 'SOME_ACTION', payload: { some: 'state' } });\n```\n\n### Create A State Stream Based On Reducers\nIn a file that you could call Store,\ncreate and expose state streams for your components\nby passing the respective reducers.\n\nHere is also the place where you can combine state streams if they\ndepend on one another.\n\n```js\n// A collection of reducers.\nconst itemListReducers = {\n  deleteItem: (action, state) =\u003e state\n    .filter(item =\u003e state.filter(item.id !== action.payload.id)),\n    \n  addItem: (action, state) =\u003e [...state, action.payload],\n  // ...\n};\n\nitemListState$ = flowState.createState$(itemListReducers, initialState);\n```\n\nIn your component you can now subscribe to the component state stream: \n\n```js\nitemListState$.subscribe(state =\u003e console.log(state));\n```\n\n### Trigger Side Effects\nYou can trigger your side effects similar to redux-observable \nby listening to the actions stream, triggering your side effect \nand return a new action.\n\nEach side effect is a function and has to be passed to \n`flowState.runSideEffects`. \n\nThe action that the result of each side effect maps to\n\n```js\n// An imaginary API.\nconst serverApi = new serverApi();\nconst action$ = flowState.getAction$();\n\nconst sideEffect1 = action$ =\u003e action$\n  .filter(action =\u003e action.type === 'DELETE_ITEM')\n  .switchMap(action =\u003e serverApi.deleteItem(action.payload))\n  .map(response =\u003e ({ type: 'RECEIVE_ITEMS', payload: response }))\n  .catch(response =\u003e ({ type: 'DELETE_ITEM_ERROR', payload: response.error });\n\nconst sideEffect1 = action$ =\u003e action$\n  .filter(action =\u003e action.type === 'ADD_ITEM')\n  .switchMap(action =\u003e serverApi.addItem(action.payload))\n  .map(response =\u003e ({ type: 'RECEIVE_ITEMS', payload: response }))\n  .catch(response =\u003e ({ type: 'ADD_ITEM_ERROR', payload: response.error });\n\nflowState.runSideEffects(sideEffect1, sideEffect2);\n```\n\n## License\n\nMIT © [Kahlil Lechelt](http://kahlil.info)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhalillechelt%2Fflow-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhalillechelt%2Fflow-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhalillechelt%2Fflow-state/lists"}