New global state methods to support SSR rehydration

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).
+
 ### `<Subscribe />`
 #### 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(/</g, '\\u003c')`. For another solution look [here](https://github.com/deamme/laco/pull/2#issuecomment-417880218).
+
 ## Testing
 Testing using [tape](https://github.com/substack/tape):
 ```javascript

packages/laco/index.ts

@@ -111,3 +111,15 @@ export function dispatch(value: any, info: string) {
   }
   return value
 }
+
+export function getGlobalState() {
+  return STORE
+}
+
+export function resetGlobalState() {
+  STORE = {}
+}
+
+export function replaceGlobalState(state: Object) {
+  STORE = state
+}

packages/laco/tests/store.ts

@@ -1,5 +1,5 @@
 import * as test from 'tape'
-import { Store } from '../dist'
+import { Store, getGlobalState, resetGlobalState, replaceGlobalState } from '../dist'
 
 test('Correct store index', t => {
   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()
+})