Redux in React.

App.js

import React, { Component } from 'react';
import Provider from "./Provider";
import Incrementer from "./Incrementer";

class App extends Provider {
  state = { value: 0 };

  render() {
    const increment = this.dispatch.bind(this, { type: "INCREMENT" });
    const decrement = this.dispatch.bind(this, { type: "DECREMENT" });

    return (
      <div>
        <span>State: { this.state.value }</span>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
        <Incrementer />
      </div>
    );
  }

  reduce(state, action) {
    console.log(state, action);

    switch(action.type) {
      case "INCREMENT":
        return { value: state.value + 1 };

      case "DECREMENT":
        return { value: state.value - 1 };

      default:
        return state;
    }
  }
}

export default App;

Incrementer.js

import React, { Component } from "react";
import { Connector } from "./Provider";

// This is an example of a "connected" component
export default class Incrementer extends Connector {
    render() {
        const increment = this.dispatch.bind(this, { type: "INCREMENT" });

        return (
            <div>
                <h3>Connected Increment</h3>
                <p>State: { JSON.stringify(this.getState()) }</p>
                <button onClick={increment}>Increment</button>
            </div>
        );
    }
}

Provider.js

import React, { Component } from "react";

// The Redux implementation
export default class Provider extends Component {
    static childContextTypes = {
        dispatch: React.PropTypes.func,
        getState: React.PropTypes.func
    };

    dispatch(action) {
        const nextState = this.reduce(this.state, action);

        if(nextState !== this.state) {
            Component.prototype.setState.call(this, nextState);
        }
    }

    getChildContext() {
        return {
            dispatch: this.dispatch.bind(this),
            getState: this.getState.bind(this)
        }
    }

    reduce(state, action) {
        return state;
    }

    setState() {
        throw new Error("You cannot set state directly, you must dispatch an action and mutate the state in the reducer.");
    }

    getState() {
        return this.state;
    }
}

export class Connector extends Component {
    static contextTypes = {
        dispatch: React.PropTypes.func,
        getState: React.PropTypes.func
    };

    dispatch(action) {
        return this.context.dispatch(action);
    }

    getState() {
        return this.context.getState();
    }
}