rx_state
v0.0.3
Published
Connect rxjs to React component in Redux style... but without dispatch and constants.
Downloads
5
Readme
RxState
Simple way to connect rxjs to React component in Redux style... but without dispatch and constants.
Installation
npm install --save rx_state
Explanation
At the beginning I didn't plan to make it a library, it was only an idea described in Use RxJS with React. I've changed my mind after couple people pinged me about it. I recommand to read the article if you want to learn and understand rationale behind this approach.
Entire library source has 60 lines so you can start from the source code.
How to use it
Create actions
No magic here, action is just new Rx.Subject
. Forget about CONSTANTs.
import { createActions } from "rx_state";
export default createActions(["increment$", "decrement$", "reset$"]);
Create reducer
As you can see our reducer is an observable of tiny functions which are going to modify state. RxState won't help you here, just RxJS.
import Rx from "rxjs";
import counterActions from "./counterActions";
const initialState = 0;
const CounterReducer$ = Rx.Observable.of(() => initialState)
.merge(
counterActions.increment$.map(payload => state => state + payload),
counterActions.decrement$.map(payload => state => state - payload),
counterActions.reset$.map(_payload => _state => initialState),
);
export default CounterReducer$;
That was the difficult part.
Create root reducer
This strange-looking map makes reducer scoped.
import Rx from "rxjs";
import CounterReducer$ from "../reducers/CounterReducer";
const reducer$ = Rx.Observable.merge(
CounterReducer$.map(reducer => ["counter", reducer]),
);
export default reducer$;
Create and provide state
import { RxStateProvider, createState } from "./state/RxState";
import App from "./components/App";
import reducer$ from "./reducers";
ReactDOM.render(
<RxStateProvider state$={createState(reducer$)}>
<App />
</RxStateProvider>,
document.getElementById("root"),
);
Connect your components
import { connect } from "rx_state";
export default connect(state => ({
counter: state.counter,
increment(n) { counterActions.increment$.next(n); },
decrement(n) { counterActions.decrement$.next(n); },
}))(Counter);
Read more about RxJS with React: http://michalzalecki.com/use-rxjs-with-react