New Redux

app.jsx

import Form from './form.jsx';

const App = (setState) => ({ entities }) => (
  <div>
    <h1>Entities Editor</h1>
    <h2>Select an entity</h2>
    <div>{
      entities.map(entity => (
        <div>
          <h3>{ entity.id }</h3>
          <Form entityId={ entity.id } />
        </div>
      ))
    }</div>
  </div>
);

const initialState = {
  entities: [
    {
      id: 'PE22',
      fields: {
        name: {
          first: 'Iddan',
          last: 'Aharonson'
        }
      }
    },
  ],
};

export default connect(null, initialState)(App);

connect.js

import { mapValues, reduce, set } from 'lodash/fp';
import WithPath from './with-path';

const getDispalyName = (component) => component.displayName || component.name;

const connect = (bindState, initialState = {}) => (WrappedComponentFactory) => {
  return class extends React.Component {
    
    static displayName = `Connect(${getDispalyName(WrappedComponentFactory)})`;

    static contextTypes = {
      state: React.PropTypes.object,
      setState: React.PropTypes.func
    };

    static childContextTypes = {
      state: React.PropTypes.object,
      setState: React.PropTypes.func
    }

    _getState = () => {
      return mapValues(WithPath, { ...bindState(this.context.state, this.props), ...initialState });
    }

    _setState = (newState) => {
      this.context.setState(reduce(
        (state, value) => set(value[WithPath.Path], value, this.context.state),
        this.context.state,
        { ...newState, ...this.getState() }
      ));
    }

    getChildContext() {
      return {
        state: this._getState(),
        setState: this._setState
      };
    }

    render() {
      const WrappedComponent = WrappedComponentFactory(this._setState);
      return <WrappedComponent { ...this.props } { ...this._getState() } />;
    }
  };
};

field.jsx

import { get } from 'lodash/fp'; 

const Field = (setState) => ({ entity, path, label, type, value }) => (
  <div>
    <label>{label}</label>
    <input type={ type }
           value={ value }
           onChange={ (e) => setState({ value: e.target.value }) } />
  </div>
);

const bindState = (state, ownProps) => ({
  value: get(ownProps.path, entity)
});

export default connect(bindState)(Field);

form.jsx

const Form = (setState) => () => (
  <div>
    <div>
      <Field type="text" path={['name', 'first']} label="First Name" />
      <Field type="text" path={['name', 'last']} label="Last Name" />
    </div>
  </div>
);

const bindState = (state, ownProps) => ({
  entity: state.entities[ownProps.entityId]
});

export default connect(bindState)(Form);

index.jsx

import { connect } from 'compux';
import App from './app.jsx';

ReactDOM.render(<App />, document.querySelector('#root'));

with-path.js

const WithPath = (target, path = []) => new Proxy(target, {
  get(target, property) {
    const value = target[property];
    const thisPath = [...path, property];
    return {
        ...(typeof value !== 'object' ? value : WithPath(value, thisPath)),
        [WithPath.Path]: thisPath
    };
  }
});

WithPath.Path = Symbol('path');

Known issues

• Can't modify state without forcing update of the updating component (for example a save button in another component)