Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Update: the newer & better version of this is published: https://github.com/developit/unistore
import { h, Component } from 'preact';
/** Creates a new store, which is a tiny evented state container.
* @example
* let store = createStore();
* store.subscribe( state => console.log(state) );
* store.setState({ a: 'b' }); // logs { a: 'b' }
* store.setState({ c: 'd' }); // logs { c: 'd' }
*/
export default function createStore(state={}) {
let listeners = [];
return {
setState(update) {
state = { ...state, ...update };
listeners.forEach( f => f(state) );
},
subscribe(f) {
listeners.push(f);
},
unsubscribe(f) {
let i = listeners.indexOf(f);
listeners.splice(i, !!~i);
},
getState() {
return state;
}
};
}
/** Provides its props into the tree as context.
* @example
* let store = createStore();
* <Provider store={store}><App /></Provider>
*/
export class Provider extends Component {
getChildContext() {
let { children, ...context } = this.props;
return context;
}
render({ children }) {
return children[0];
}
}
/** Wire a component up to the store. Passes state as props, re-renders on change.
* @param {Function|Array|String} mapStateToProps A function (or any `select()` argument) mapping of store state to prop values.
* @example
* const Foo = connect('foo,bar')( ({ foo, bar }) => <div /> )
* @example
* @connect( state => ({ foo: state.foo, bar: state.bar }) )
* export class Foo { render({ foo, bar }) { } }
*/
export function connect(mapToProps) {
if (typeof mapToProps!=='function') mapToProps = select(mapToProps);
return Child => class Wrapper extends Component {
state = this.getProps();
update = () => {
let mapped = this.getProps();
if (!shallowEqual(mapped, this.state)) {
this.setState(mapped);
}
};
getProps() {
let state = this.context.store && this.context.store.getState() || {};
return mapToProps(state);
}
componentWillMount() {
this.context.store.subscribe(this.update);
}
componentWillUnmount() {
this.context.store.unsubscribe(this.update);
}
render(props, state, context) {
return <Child store={context.store} {...props} {...state} />;
}
};
}
/** select('foo,bar') creates a function of the form: ({ foo, bar }) => ({ foo, bar }) */
export function select(properties) {
if (typeof properties==='string') properties = properties.split(',');
return state => {
let selected = {};
for (let i=0; i<properties.length; i++) {
selected[properties[i]] = state[properties[i]];
}
return selected;
};
}
/** Returns a boolean indicating if all keys and values match between two objects. */
function shallowEqual(a, b) {
for (let i in a) if (a[i]!==b[i]) return false;
for (let i in b) if (!(i in a)) return false;
return true;
}
@anthonybrown

This comment has been minimized.

Copy link

@anthonybrown anthonybrown commented Oct 12, 2017

wow, that's neat.

@developit

This comment has been minimized.

Copy link
Owner Author

@developit developit commented Dec 7, 2017

update: published this as a proper module https://github.com/developit/unistore

@ashokbharathi

This comment has been minimized.

Copy link

@ashokbharathi ashokbharathi commented Dec 6, 2018

very useful...Thanks...

@DevinXian

This comment has been minimized.

Copy link

@DevinXian DevinXian commented Nov 8, 2019

Like it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment