rx-redux
v0.5.7
Published
Reimplement redux using rxjs
Downloads
21
Maintainers
Readme
rx-redux
A reimplementation of redux using RxJS.
Why?
Reactive by default, this makes difference.
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 one helper function
import { connectAction } from 'rx-redux';
- You can use
connectAction(action$, store)
to stream actions to dispatcher.
- You can use
What does it look like?
import {createStore, combineReducers, applyMiddleware} 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));
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 app. See universal example
RxMiddleware
Which wrap 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 a action (eg. if counter is not odd), return a
dummy action
.
WIP
- Figure out how to test a Rx project (No experience before).
- Work with Hot Module Replacement.
- Work with redux-devtools.
- More examples.