Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blueberryapps/redux-preload
Preload actions on both server & client side (allows deep nesting of components)
https://github.com/blueberryapps/redux-preload
blueberry-opensource client-side-rendering componentdidmount javascript prefetch preload react redux server-side-rendering
Last synced: 3 months ago
JSON representation
Preload actions on both server & client side (allows deep nesting of components)
- Host: GitHub
- URL: https://github.com/blueberryapps/redux-preload
- Owner: blueberryapps
- License: mit
- Created: 2017-03-31T13:13:35.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T17:28:40.000Z (about 2 years ago)
- Last Synced: 2024-11-03T04:03:20.486Z (3 months ago)
- Topics: blueberry-opensource, client-side-rendering, componentdidmount, javascript, prefetch, preload, react, redux, server-side-rendering
- Language: JavaScript
- Size: 393 KB
- Stars: 20
- Watchers: 27
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Preload [](https://circleci.com/gh/blueberryapps/redux-preload) [](https://dependencyci.com/github/blueberryapps/redux-preload)
## Description
Module is using to dispatch some actions (usually async data fetching) immediately after the rendering occurs. Works both on client and server sides.
## Usage on client
``` javascript
import preload from 'redux-preload';
@preload([
// You can just pass a single action creator, or array of them
({ someProp }) => ({ type: 'FETCH', payload: someProp })
])
class Container extends Component {
render() {
return
;
}
}
```
## Usage on server
On server to get all goodness of _**isomorphic-deeply-nested-component-data-prefetch**_ you need to call `serverPreload(routerContext)` with router context.
And also send preloaded data back to client using `window.__INITIAL_STATE__ = ${serialize(store.getState())};`
`serverPreload` is a promise - when promise resolves data is already fetched (store is polluted with data) and now you can render your DOM
Here is pseudo code that demonstrate that on server in `render.js`
``` javascript
import { serverPreload } from 'redux-preload';
const getRouterContext = function(store, renderProps) {
return (
);
}
const renderHtml = (store, renderProps) => {
return '' + ReactDOMServer.renderToStaticMarkup(
);
};
export default function render(req, res, next) {
const store = createStore(...);
...
match({routes, location}, async (error, redirectLocation, renderProps) => {
...
try {
await serverPreload(getRouterContext(store, renderProps));
const html = renderHtml(store, renderProps, req);
res.status(200).send(html);
} catch (exception) {
next(exception);
}
});
}
```
#### Restore state sent from server
On client you need to revive state with data sent from server.
You can do it in `main.js`
``` javascript
const store = createStore({
initialState: window.__INITIAL_STATE__
});
ReactDOM.render(
{createRoutes(store.getState)}
,
document.getElementById('app')
);
```
## Development
```
yarn install
yarn eslint
yarn eslint:fix
yarn test
```
## CI and autopublish
On Circle CI you need to add `NPM_TOKEN` which has rights to publish package to npmjs.org.
Also when you provide `SLACK_TOKENS` redux-preload/YYY/ZZZZ
(take them as one string from url `https://hooks.slack.com/services/redux-preload/YYY/ZZZ`)
it will let you know about new version.
When code gets to master branch, it will try to publish,
so if version in package.json is different, it will push it automatically.
## Made with love by
[](https://www.blueberry.io)