Rx-redux NPM | npm.io

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.

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