rx-redux

by jas-chen

jas-chen /rx-redux

A reimplementation of redux using RxJS.

414 Stars 19 Forks Last release: Not found MIT License 90 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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: ```javascript 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](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md).
- **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)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.