Skip to content

Instantly share code, notes, and snippets.

@ograycode
Created May 17, 2019 12:40
Show Gist options
  • Save ograycode/ac78ed7c7d7bc8271a2c45ecf3543534 to your computer and use it in GitHub Desktop.
Save ograycode/ac78ed7c7d7bc8271a2c45ecf3543534 to your computer and use it in GitHub Desktop.
A super simple implementation of a psuedo-flux pattern.
import React, { Component, Fragment } from 'react';
const connect = (Wrapped, store) => {
return class extends Component {
constructor(props) {
super(props);
this.state = { store };
}
dispatch(name, data) {
const results = store.setters[name](store, data);
this.setState(results);
}
render() {
return <Wrapped
store={this.state.store}
dispatch={this.dispatch.bind(this)}
{...this.props} />;
}
};
};
const store = {
data: { num: 1 },
setters: {
incr(store) {
store.data.num++;
return store;
}
}
};
const App = ({dispatch, store}) => {
return (
<Fragment>
<h1>hello world {store.data.num}</h1>
<button onClick={() => dispatch('incr')}>Incr</button>
</Fragment>
);
};
export default connect(App, store);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment