react-bonestore v1.0.1

React bonestore connect

Connect bonestore using React higher-order component (HOC)

Example

// index.jsx
import { Provider } from 'react-bonestore';
import List from './list';
import store from './store'; // bonestore

ReactDOM.render(
    <Provider store={store}>
        <List />
    </Provider>,
    document.getElementById('app')
);


// posts-list.jsx
import connect from 'react-bonestore';

const List = ({ posts, onPostCreate }) =>
    <div>
        <ul>
            {posts.map((post) =>
                <li>{post.title}</li>
            )}
        </ul>
        <button onClick={() => {
            onPostCreate({title: 'Hello new post!'})
        }}>Create</button>
    </div>;

export default connect((props) => [
    'posts',
    ['onPostCreate', 'posts', (posts) => (data) => posts.create(data)]
])(List);

Shortcut definitions

The following definitions are identical:

export default connect(() => [
    'posts',
    // ↓
    ['posts', 'posts', (store) => store.defaultFind()]
    // ↓
    {
        propName: 'posts',
        watch: ['posts'],
        value: (store) => store.defaultFind()
    }
])(List);