A reimplementation of redux using RxJS.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Jas Chen
Jas Chen update README
Latest commit 96aa8a6 Aug 6, 2015
Permalink
Failed to load latest commit information.
examples update README Aug 6, 2015
src fix issues found by eslint Aug 1, 2015
.babelrc add .babelrc Jul 23, 2015
.eslintrc clean up Jul 27, 2015
.gitignore add build Jul 27, 2015
.npmignore v0.5.1 Jul 30, 2015
LICENSE add LICENSE and README Jul 27, 2015
README.md update README Aug 6, 2015
package.json v0.5.7 Aug 1, 2015
webpack.config.js clean up Jul 27, 2015

README.md

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

  • 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!

Inspiration

  • redux, learn a lot through the source code.
  • Cycle.js for the cool MVI flow.

License

The MIT License (MIT)