react-state

RxJS and ImmutableJs powered state management React apps. Inspired by NgRx.

ng-state is a controlled nested state container designed to help write performant, consistent applications on top of React. Core tenets:

• State is a single immutable data structure
• Each component gets its own peace of nested state
• State accessed with 'actions' variable under component or the Store, an observable of state and an observer of global state

react-state is build on same core as ng-state. So most library behaviour can be found there.

Main differences from other RxJs store based state managements solutions

• Allows state nesting and injects responable peaces to components
• Uses immutablejs fast equality object check for high performance
• Actions can return observables, promises or simple objects
• Decoples / Hides paths to state from components
• Uses Redux like pure functions - actions to interact with state
• Uses Redux like messages for comunication between not related components: see ng-state for more detail explanation
• Does not use React component state, so it can be used by user for other purposes
• No boilerplate
• No long nested paths to access store

Performance first

Each component implements shouldComponentUpdate method which default return value changed to false. Component updates only when:

• state is changed
• changed default value of shouldComponentUpdate to true by passing true to ComponentState decorator
• component has explicit shouldComponentUpdate implementation that causes update

Main differences made for React:

Configuration

In your app's main module, register store with initial state by using ReactState.init

ReactState.init((routerHistory: History) => {
    ReactDOM.render(<Main history={routerHistory} />, document.getElementById("example"))
}, initialState)

params

• routeHistory - it is react-router-dom 'createHistory' object initialized under the hood to collect routing history for 'time travel' functionality. This param passed to Main component and then to the Router

<!--index.tsx-->
 ReactDOM.render(<Main history={routerHistory} />, document.getElementById("example"))

<!--main.tsx-->
 <Router history={this.props.history}>

• initialState - this is your initial state

import * as Immutable from "immutable";

let initialState = Immutable.fromJS({
    todos: []
});

export { initialState };

Difference in StateAction's

• Geeters are not converted to properties because React change detecions has no performance penalties with it
• All actions that returns Observable or Promise has to end with 'Async'

get todoDescriptionAsync() {
    return this.store.map((state) => {
        return state.get('description');
    });
}

• Apart from stroe injected to actions there is an optional parameter state that can be used in non Async actions

get todoDescription() {
    return this.state.get('description');
}

• statePath and stateIndex are passed down to components by using params. (you do not need to do anything with those it is just for react-state-rxjs library to track components path)

<TodoDescription statePath={this.statePath} stateIndex={index} />

• To get 'Time Travel' functionality you have to include StateHistoryComponent to your main application passing routerHistory param to it

<StateHistoryComponent routerHistory={this.props.history} />

Here is basic flow with code side-by-side explained: