Closed marvinroger closed 6 years ago
Since Henrik mentioned the preact bindings are similar to Unistore's, I thought I'd drop a few links here pointing to where Unistore handles its React bindings.
Bindings: https://github.com/developit/unistore/blob/master/src/integrations/react.js
Microbundle build for both bindings: (produces cjs/es/umd for each in a directory) https://github.com/developit/unistore/blob/e8e468c687e0a30faf02995764300879df31251b/package.json#L13
Jest tests for the React bindings: (I might port these to karmatic) https://github.com/developit/unistore/tree/master/test/react
edit: I just noticed @HenrikJoreteg was smart and split the integrations out into different packages, so react bindings are much easier here. Good thinking!
Here you go:
import {createElement, Component, Children} from 'react'
const CONTEXT_TYPES = {
store: () => {}
}
export class Provider extends Component {
getChildContext () {
return { store: this.props.store }
}
render () {
return Children.only(this.props.children)
}
}
Provider.childContextTypes = CONTEXT_TYPES
export const connect = (...args) => {
const Comp = args.slice(-1)[0]
const strings = args.length > 1 ? args.slice(0, -1) : []
const actionCreators = []
const keysToWatch = []
strings.forEach((str) => {
if (str.slice(0, 6) === 'select') {
keysToWatch.push(str)
return
}
if (str.slice(0, 2) === 'do') {
actionCreators.push(str)
return
}
throw Error(`CanNotConnect ${str}`)
})
class Connect extends Component {
constructor (props, context) {
super(props, context)
const store = context.store
this.state = store.select(keysToWatch)
this.unsubscribe = store.subscribeToSelectors(keysToWatch, this.setState.bind(this))
this.actionCreators = {}
actionCreators.forEach((name) => {
this.actionCreators[name] = (...args) => store[name](...args)
})
}
componentWillUnmount () {
this.unsubscribe()
}
render () {
return createElement(Comp, Object.assign({}, this.props, this.state, this.actionCreators))
}
}
Connect.contextTypes = CONTEXT_TYPES
return Connect
}
Thanks for the tips @developit I won't publish the package myself as I quite did nothing here
@marvinroger @developit thanks! Here ya go: https://github.com/HenrikJoreteg/redux-bundler-react
Hi!
First, thanks for sharing this awesome project. I can definitely see this redux-bundler getting the traction it deserves.
It's written in the README that there's no React binding yet. I am pretty sure it would help for the adoption of this project, and, considering, as you say...
... I think it's a pity not to have it. 😉
I'd have helped if I could, but I am not familiar enough with the inner of React.