https://github.com/bertho-zero/mobx-async-connect
https://github.com/bertho-zero/mobx-async-connect
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/bertho-zero/mobx-async-connect
- Owner: bertho-zero
- Created: 2016-07-19T10:28:09.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-24T00:08:46.000Z (almost 10 years ago)
- Last Synced: 2025-04-23T08:51:20.842Z (about 1 year ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mobx-async-connect
How do you usually request data and store it to mobx store?
You create actions that do async jobs to load data, create store to save this data to mobx state,
then connect data to your component or container.
Usually it's very similar routine tasks.
Also, usually we want data to be preloaded. Especially if you're building universal app,
or you just want pages to be solid, don't jump when data was loaded.
This package consist of 2 parts: one part allows you to delay containers rendering until some async actions are happening.
Another stores your data to mobx store and connect your loaded data to your container.
## Notice
This is a fork, merge and refactor of [redux-async-connect](https://github.com/Rezonans/redux-async-connect) and [redux-connect](https://github.com/makeomatic/redux-connect) for Mobx.
## Installation & Usage
Using [npm](https://www.npmjs.com/):
`$ npm install mobx-async-connect -S`
```js
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import { browserHistory, Router, Route } from 'react-router';
import { MobxAsyncConnect, asyncConnect, store as mobxAsyncConnect } from 'mobx-async-connect';
// 1. Connect your data, similar to mobx-react @inject
@asyncConnect([{
key: 'lunch',
promise: ({ store, location, params }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])
class App extends React.Component {
render() {
// 2. access data as props
const lunch = this.props.lunch
return (
{lunch.name}
);
}
}
// 3. Connect mobx async store
const initialState = window.__data || null;
const store = {
mobxAsyncConnect: new mobxAsyncConnect(initialState && initialState.mobxAsyncConnect || undefined)
};
// 4. Render `Router` with MobxAsyncConnect middleware
render((
!item.deferred} />} history={browserHistory}>
), el);
```
### Server
```js
import { renderToString } from 'react-dom/server';
import { match } from 'react-router';
import { Provider } from 'mobx-react';
import { MobxAsyncConnect, loadOnServer, store as mobxAsyncConnect } from 'mobx-async-connect';
import createHistory from 'react-router/lib/createMemoryHistory';
import serialize from 'serialize-javascript';
app.get('*', (req, res) => {
const store = {
mobxAsyncConnect: new mobxAsyncConnect()
};
match({ history, routes, location: req.url }, (err, redirect, renderProps) => {
// 1. load data
loadOnServer({ ...renderProps, store }).then(() => {
// 2. use `MobxAsyncConnect` instead of `RouterContext` and pass it `renderProps`
const appHTML = renderToString(
);
// 3. render the Mobx initial data into the server markup
const html = createPage(appHTML, store);
res.send(html);
});
});
});
function createPage(html, store) {
return `
${html}
`;
}
```
## API
By default `render` props of the `MobxAsyncConnect` component is:
```js
const render = props => ;
```
##
All additionnals 'parameters' (eg: helpers, data fetcher) added to props of `MobxAsyncConnect` component(s) are accessible in promise options, beside `store`, `location`, `params` and others.
Note: For universal application it is highly recommended to have the same client-side props than server side.
## Contributors
- [Kévin Berthommier](https://github.com/bertho-zero)
## Collaboration
You're welcome to PR, and we appreciate any questions or issues, please [open an issue](https://github.com/bertho-zero/mobx-async-connect/issues)!