Redux and react-redux compatible library

README.md

Usage

// App.js

import React from "react";
import { connect } from "./state-manager-react";

const App = props => (
  <div>
    <button onClick={props.decrement}>-</button>
    {props.count}
    <button onClick={props.increment}>+</button>
  </div>
);

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => {
    dispatch({ type: "increment" });
  },
  decrement: () => {
    dispatch({ type: "decrement" });
  }
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

// index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './app';

const store = createStore((state = { count: 0 }, action = {}) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
  }
  return state;
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

state-manager-react.js

import React from "react";

const StateContext = React.createContext();

class ComponentProxy extends React.Component {
  render() {
    const NewComponent = this.props.component;
    return (
      <StateContext.Consumer>
        {value => {
          const state = value.getState();
          const dispatch = value.dispatch;
          const { mapStateToProps, mapDispatchToProps } = this.props;
          const props = {
            ...this.props.props,
            ...mapStateToProps(state),
            ...mapDispatchToProps(dispatch)
          };
          const cb = () => {
            this.forceUpdate();
            value.unsubscribe(cb);
          };
          value.subscribe(cb);
          return <NewComponent {...props} />;
        }}
      </StateContext.Consumer>
    );
  }
}

export class Provider extends React.Component {
  componentDidMount() {
    this.props.store.subscribe(() => {
      this.forceUpdate();
    });
  }
  render() {
    return (
      <StateContext.Provider value={this.props.store}>
        {this.props.children}
      </StateContext.Provider>
    );
  }
}

export function connect(mapStateToProps, mapDispatchToProps) {
  return Component => {
    const NewComponent = React.memo(Component);
    return props => {
      return (
        <ComponentProxy
          props={props}
          component={NewComponent}
          mapStateToProps={mapStateToProps}
          mapDispatchToProps={mapDispatchToProps}
        />
      );
    };
  };
}

state-manager.js

export function createStore(reducer) {
  let state = reducer();
  let listeners = [];
  return {
    getState() {
      return state;
    },
    dispatch(action) {
      state = reducer(state, action);
      listeners.forEach(listener => {
        listener(state);
      });
    },
    subscribe(callback) {
      listeners = [...listeners, callback];
    },
    unsubscribe(callback) {
      listeners = listeners.filter(listener => listener !== callback);
    }
  };
}