React state management with RxJS

React state management with RxJS.md

This is an example of how to use RxJS to manage state within a React app.

• The service exposes an emitter that emits the entire state whenever a change is made.
• The React component then calls setState() with the new state.
• The service is passed down via props so that child components can access mutator methods.

todo-container.js

import {Component} from 'react';
import {TodoService} from './todo.service';

export class TodoContainer extends Component {

    constructor(props) {
        super(props);
    
        this.props.services.todoService = new TodoService();
        this.props.state.todos = [];
    }

    componentDidMount() {
        this.todoService.emitter.subscribe(todos => {
            this.setState({this.props.state.todos: todos});
        });
    }

    componentWillUnmount() {
        this.props.services.todoService.dispose();
    }

    render() {
        return (
            <div>
                <TodoList {...this.props} />
                <AddTodo />
            </div>
        );
    }
}

todo-service.js

import {Subject} from 'rxjs/Subject';
import {ajax} from 'rxjs/observable/dom/ajax';

export class TodoService {

    constructor() {
        this.emitter = new Subject();
        this.todos = [];
    }

    const getTodos = (todos) => {
        ajax({url: '/todos'}).subscribe(
            (data) => {
                this.todos = data;

                // Emit to subscribers
                this.emitter.next(this.todos);
            },
            (error) => {
                // Log the error
            }
        )
        .retry(3);
    };

    const addTodo = (todo) => {
        ajax({
            url: '/todos',
            method: 'post',
            body: todo
        }).subscribe(
            (data) => {
                this.todos = Object.assign({}, this.todos, [
                    ...this.todos,
                    {
                        text: todo.text,
                        completed: todo.completed
                    }
                ]);
    
                this.emitter.next(this.todos);
            },
            (error) => {
                // Log the error
            }
        ).retry(3);
        
        
    };
}