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 commented Oct 12, 2017

wow, that's neat.

@developit

This comment has been minimized.

Copy link
Owner Author

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 commented Dec 6, 2018

very useful...Thanks...

@DevinXian

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.