A simple way to manage UI state and side effects with RxJS.
- 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 (or not)
npm install @kahlil/flow-state
import { createFlowState } from '@kahlil/flow-state';
const flowState = createFlowState();In your components dispatch actions by passing the action constant and optionally an action payload. The payload can be any value.
flowState.dispatch({ type: 'SOME_ACTION', payload: { some: 'state' } });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.
// 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:
itemListState$.subscribe(state => console.log(state));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
// 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);MIT © Kahlil Lechelt