Awesome
rx-redux
A reimplementation of redux using RxJS.
Why?
Reactive by default, this makes difference.
If you just want to use redux with RxJS and don't care about API compatibility, see redux-core.
Features
- All of the redux APIs implemented.
- Additionally,
store
provides 2 rx objects you can utilize:dispatcher$
is a Subject that you can pass actions in.state$
is an Observable, a stream of states.
- And a helper function
connectAction
to stream actions to store (see example below).
What does it look like?
import {createStore, combineReducers, applyMiddleware, connectAction} from 'rx-redux'
import thunkMiddleware from 'redux-thunk'
import * as reducers from './reducers'
import { render, getActionStream } from './view'
const action$ = getActionStream();
const newCreateStore = applyMiddleware(thunkMiddleware)(createStore);
const reducer = combineReducers(reducers);
const store = newCreateStore(reducer);
// stream states to view
store.state$.subscribe(state => render(state));
// stream actions to dispatcher
action$.subscribe(action => store.dispatcher$.onNext(action));
// or you can write this way
// connectAction(action$, store);
Best practice to make your app all the way reactive
Don't do async in Middleware
, create RxMiddleware
instead.
This will ease the pain to build universal apps.
RxMiddleware
Which wraps action stream, look like this:
import Rx from 'rx';
export default function thunkMiddleware(getState) {
return action => {
if(typeof action === 'function') {
return Rx.Observable.just(action(getState));
}
// Don't know how to handle this thing, pass to next rx-middleware
return Rx.Observable.just(action);
};
}
How to design RxMiddleware
- Get action, return Observable.
- Must return Observable.
- If you don't want to return an action (eg. if counter is not odd), return a Rx.Observable.empty().
See a basic RxMiddleware example
WIP
- Figure out how to test a Rx project (No experience before).
- Work with Hot Module Replacement.
- Work with redux-devtools.
- More examples.
Thanks
- @xgrommx for submitting pull requests and suggestions.
Feel free to ask questions or submit pull requests!