https://github.com/khalillechelt/flow-state
UI state management with RxJS.
https://github.com/khalillechelt/flow-state
dispatch-actions payload reducer rxjs state-management state-stream unidirectional-dataflow
Last synced: 9 months ago
JSON representation
UI state management with RxJS.
- Host: GitHub
- URL: https://github.com/khalillechelt/flow-state
- Owner: khalillechelt
- License: mit
- Created: 2016-06-01T13:07:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T10:21:22.000Z (almost 4 years ago)
- Last Synced: 2025-03-18T03:56:24.406Z (9 months ago)
- Topics: dispatch-actions, payload, reducer, rxjs, state-management, state-stream, unidirectional-dataflow
- Language: JavaScript
- Homepage:
- Size: 4.3 MB
- Stars: 34
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# FlowState 🌊
Dead 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.
## Highlights
- Inspired by Redux and redux-observable
- The state is delivered with streams
- Reducers are just functions, no switch-case
- Isolate side effects that map back to actions
## Install
`npm install @kahlil/flow-state`
## Usage
```js
import { createFlowState } from '@kahlil/flow-state';
const flowState = createFlowState();
```
### Dispatch Actions
In your components dispatch actions by passing the action constant and optionally
an action payload. The payload can be any value.
```js
flowState.dispatch({ type: 'SOME_ACTION', payload: { some: 'state' } });
```
### Create A State Stream Based On Reducers
In a file that you could call Store,
create and expose state streams for your components
by passing the respective reducers.
Here is also the place where you can combine state streams if they
depend on one another.
```js
// A collection of reducers.
const itemListReducers = {
deleteItem: (action, state) => state
.filter(item => state.filter(item.id !== action.payload.id)),
addItem: (action, state) => [...state, action.payload],
// ...
};
itemListState$ = flowState.createState$(itemListReducers, initialState);
```
In your component you can now subscribe to the component state stream:
```js
itemListState$.subscribe(state => console.log(state));
```
### Trigger Side Effects
You can trigger your side effects similar to redux-observable
by listening to the actions stream, triggering your side effect
and return a new action.
Each side effect is a function and has to be passed to
`flowState.runSideEffects`.
The action that the result of each side effect maps to
```js
// An imaginary API.
const serverApi = new serverApi();
const action$ = flowState.getAction$();
const sideEffect1 = action$ => action$
.filter(action => action.type === 'DELETE_ITEM')
.switchMap(action => serverApi.deleteItem(action.payload))
.map(response => ({ type: 'RECEIVE_ITEMS', payload: response }))
.catch(response => ({ type: 'DELETE_ITEM_ERROR', payload: response.error });
const sideEffect1 = action$ => action$
.filter(action => action.type === 'ADD_ITEM')
.switchMap(action => serverApi.addItem(action.payload))
.map(response => ({ type: 'RECEIVE_ITEMS', payload: response }))
.catch(response => ({ type: 'ADD_ITEM_ERROR', payload: response.error });
flowState.runSideEffects(sideEffect1, sideEffect2);
```
## License
MIT © [Kahlil Lechelt](http://kahlil.info)