diff --git a/README.md b/README.md index 1417d09..9ce24d5 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,32 @@ dispatch(changeLocation(), "Location change") ``` You might want to dispatch a global action that is **NOT** associated with any store. The action will in this case just be shown as `Location change`. +### `getGlobalState()` +```javascript +import { getGlobalState } from 'laco' + +getGlobalState() +``` +Returns the global object that holds every state - mostly used for [rehydration](https://github.com/deamme/laco#Rehydration) when doing server-side rendering (SSR). + +### `resetGlobalState()` +```javascript +import { resetGlobalState } from 'laco' + +resetGlobalState() +``` +Resets the global state to an empty object. + +### `replaceGlobalState()` +```javascript +import { replaceGlobalState } from 'laco' + +const newGlobalState = { 0: { test: true } } + +replaceGlobalState(newGlobalState) +``` +Replaces the global state completely - mostly used for [rehydration](https://github.com/deamme/laco#Rehydration) when doing server-side rendering (SSR). + ### `` #### Props - `to` - Array of stores you want to subscribe to @@ -151,6 +177,19 @@ The `Subscribe` component is making use of the new render prop idea. Related art - [Apollo Query Component](https://dev-blog.apollodata.com/whats-next-for-react-apollo-4d41ba12c2cb) - [Use a render prop!](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) +## Rehydration +When doing server-side rendering (SSR) it's important to preserve the state from the server to the client. + +Please follow [this](https://redux.js.org/recipes/serverrendering) Redux guide. + +On the server: Instead of doing `store.getState()` you will just use `getGlobalState()`. + +On the client: Instead of doing `createStore(counterApp, preloadedState)` you can do `replaceGlobalState(preloadedState)` + +Keep in mind that trying to do SSR rehydration can introduce JS injections if you don't do it right. + +The Redux guide solves it by doing `JSON.stringify(preloadedState).replace(/ { const FirstStore = new Store({ test: true }) @@ -138,3 +138,14 @@ test('TestStore actions with condition', t => { t.end() }) + +test('Global state', t => { + resetGlobalState() + t.assert(JSON.stringify(getGlobalState()) === JSON.stringify({})) + + const newGlobalState = { 0: { test: true }} + replaceGlobalState(newGlobalState) + t.assert(JSON.stringify(getGlobalState()) === JSON.stringify(getGlobalState())) + + t.end() +})