m0a / Typescript Fsa Redux Observable
Licence: mit
TypeScript FSA utilities for redux-observable
Stars: ✭ 28
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Typescript Fsa Redux Observable
redux-tools
💪 Maintaining large Redux applications with ease.
Stars: ✭ 34 (+21.43%)
Mutual labels: redux-observable
arcomage-hd
Web-based, free and open source, remastered 3D clone of 3DO/NWC's 2000 card game Arcomage. 13 languages. Desktop or mobile Android iOS. Online or offline PWA. Against AI or Multiplayer (w/o server). 🧝👾🃏 (ts+react+redux+rxjs, CSS-based anim, WebRTC)
Stars: ✭ 55 (+96.43%)
Mutual labels: redux-observable
typescript-react-redux-starter-kit
🏅🎖🥇Typescript+React全家桶脚手架
Stars: ✭ 21 (-25%)
Mutual labels: redux-observable
ts-react-boilerplate
A very opinionated (React/TypeScript/Redux/etc) frontend boilerplate
Stars: ✭ 43 (+53.57%)
Mutual labels: redux-observable
react-ssr-advanced-seed
🔮 React SSR Advanced Seed (Typescript + nestJS + React SSR + React Native + Docker)
Stars: ✭ 76 (+171.43%)
Mutual labels: redux-observable
Rxjs Websockets
A very flexible and simple websocket library for rxjs
Stars: ✭ 248 (+785.71%)
Mutual labels: redux-observable
Redux Subspace
Build decoupled, componentized Redux apps with a single global store
Stars: ✭ 319 (+1039.29%)
Mutual labels: redux-observable
react-redux-observables-boilerplate
Starter kit for React with Router, Redux, Observable + RxJS
Stars: ✭ 89 (+217.86%)
Mutual labels: redux-observable
hot-redux-chassis
Modern React/Redux/RxJS application using all the latest and greatest stuff from the community 🔥
Stars: ✭ 20 (-28.57%)
Mutual labels: redux-observable
React-Redux-Enterprise
A React-Redux boilerplate for enterprise/large scaled web applications
Stars: ✭ 77 (+175%)
Mutual labels: redux-observable
react-ts-sample
sample tech stack with react and typescript
Stars: ✭ 26 (-7.14%)
Mutual labels: redux-observable
react-native-hybrid-app
Demo application ofReact Native Hybrid Application (ReactNative + Redux + RxJs)
Stars: ✭ 15 (-46.43%)
Mutual labels: redux-observable
ts-action-operators
TypeScript action operators for NgRx and redux-observable
Stars: ✭ 34 (+21.43%)
Mutual labels: redux-observable
Hls Downloader Web Extension
Web Extension for sniffing and downloading HTTP Live streams (HLS)
Stars: ✭ 510 (+1721.43%)
Mutual labels: redux-observable
hls-downloader
Web Extension for sniffing and downloading HTTP Live streams (HLS)
Stars: ✭ 834 (+2878.57%)
Mutual labels: redux-observable
react-tools-for-better-angular-apps
Use React ecosystem for unified and top notch DX for angular developement
Stars: ✭ 30 (+7.14%)
Mutual labels: redux-observable
TypeScript FSA utilities for redux-observable
Installation
yarn add typescript-fsa-redux-observable
API
ofAction(action: ActionCreator)
Example:
// for actions
import actionCreatorFactory, { AnyAction, Action, Success } from 'typescript-fsa';
// for reducers
import { reducerWithInitialState } from 'typescript-fsa-reducers';
import { combineReducers } from 'redux';
//for epics
import { delay, map, tap, ignoreElements } from 'rxjs/operators';
import { ofAction, ofActionPayload } from 'typescript-fsa-redux-observable'; // <-- here
import { combineEpics, Epic, createEpicMiddleware } from 'redux-observable';
//reducer
import {createStore, applyMiddleware} from 'redux';
// action
const actionCreator = actionCreatorFactory();
const actions = {
increment: actionCreator.async<undefined, undefined>('INCREMENT'),
decrement: actionCreator.async<undefined, undefined>('DECREMENT')
};
// reducers & state
interface State {
counter: number;
}
const counter = reducerWithInitialState(0)
.case(actions.increment.done, state => state + 1)
.case(actions.decrement.done, state => state - 1);
const rootReducer = combineReducers({
counter
});
// epics
const counterIncrementEpic: Epic<AnyAction, Action<Success<undefined, undefined>>, State> =
action$ =>
action$.pipe(
ofActionPayload(actions.increment.started),
delay(300),
map(payload => actions.increment.done({
params: payload,
result: undefined
}))
);
const counterDecrementEpic: Epic<AnyAction, Action<Success<undefined, undefined>>, State> =
action$ =>
action$.pipe(
ofActionPayload(actions.decrement.started),
delay(300),
map(payload => actions.decrement.done({
params: payload,
result: undefined
}))
);
const loggingEpic: Epic<AnyAction, AnyAction, State> =
action$ =>
action$.pipe(
ofAction(
actions.decrement.started,
actions.increment.started,
),
tap(action => console.log(action.type)),
ignoreElements()
);
const rootEpic = combineEpics(
counterIncrementEpic,
counterDecrementEpic,
loggingEpic,
);
const epicMiddleware = createEpicMiddleware<AnyAction, AnyAction, State>();
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));
epicMiddleware.run(rootEpic);
// tool
async function sleep(time: number) {
return new Promise<void>(resolve => {
setTimeout(() => (resolve()), time)
})
}
it("increment decrement test", async () => {
expect(store.getState()).toEqual({ counter: 0 });
store.dispatch(actions.increment.started(undefined));
expect(store.getState()).toEqual({ counter: 0 });
await sleep(300);
expect(store.getState()).toEqual({ counter: 1 });
store.dispatch(actions.decrement.started(undefined));
expect(store.getState()).toEqual({ counter: 1 });
await sleep(300);
expect(store.getState()).toEqual({ counter: 0 })
});
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].