Have ideas to improve npm?Join in the discussion! »

    rx-redux

    0.5.7 • Public • Published

    rx-redux

    npm version

    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

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

    See 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.

    Inspiration

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

    License

    The MIT License (MIT)

    Install

    npm i rx-redux

    DownloadsWeekly Downloads

    12

    Version

    0.5.7

    License

    MIT

    Last publish

    Collaborators

    • avatar