Created
May 17, 2019 12:40
-
-
Save ograycode/ac78ed7c7d7bc8271a2c45ecf3543534 to your computer and use it in GitHub Desktop.
A super simple implementation of a psuedo-flux pattern.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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