Home

Awesome

npm version

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

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

See a basic RxMiddleware example

WIP

Thanks

Feel free to ask questions or submit pull requests!

Inspiration

License

The MIT License (MIT)