Add render to comments-client

packages/client/src/renderer/ClientRenderer.tsx

@@ -1,34 +1,41 @@
-import ReactDOM from 'react-dom'
 import React from 'react'
-import {Provider} from 'react-redux'
-import {IStoreFactory} from './IStoreFactory'
+import ReactDOM from 'react-dom'
+import {Action} from 'redux'
 import {IRenderer} from './IRenderer'
+import {IStoreFactory} from './IStoreFactory'
+import {Provider} from 'react-redux'
 
-export class ClientRenderer implements IRenderer {
-  constructor(
-    readonly createStore: IStoreFactory,
+export interface IClientRendererParams<State, A extends Action> {
+  readonly createStore: IStoreFactory<State, A | any>,
   readonly RootComponent: React.ComponentType,
-    readonly target = document.body,
-  ) {}
+  readonly target?: HTMLElement
+}
+
+export class ClientRenderer<State, A extends Action> implements IRenderer {
+  constructor(readonly params: IClientRendererParams<State, A>) {}
 
   render(state = (window as any).__PRELOADED_STATE__) {
-    const {RootComponent} = this
+    const {
+      RootComponent,
+      createStore,
+      target = document.body,
+    } = this.params
 
     if (state) {
-      const store = this.createStore(state)
+      const store = createStore(state)
       ReactDOM.hydrate(
         <Provider store={store}>
           <RootComponent />
         </Provider>,
-        this.target,
+        target,
       )
     } else {
-      const store = this.createStore()
+      const store = createStore()
       ReactDOM.render(
         <Provider store={store}>
           <RootComponent />
         </Provider>,
-        this.target,
+        target,
       )
     }
   }

packages/client/src/renderer/IStoreFactory.ts

@@ -1,4 +1,5 @@
-import {Store} from 'redux'
+import {Action, Store} from 'redux'
 
 // TODO maybe Store should also be typed
-export type IStoreFactory = (state?: any) => Store
+export type IStoreFactory<State, A extends Action> =
+  (state?: State) => Store<State, A | any>

packages/client/src/renderer/ServerRenderer.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
+import {Action} from 'redux'
 import {IRenderer} from './IRenderer'
 import {IStoreFactory} from './IStoreFactory'
 import {Provider} from 'react-redux'
 import {renderToNodeStream} from 'react-dom/server'
 
-export class ServerRenderer implements IRenderer {
+export class ServerRenderer<State, A extends Action> implements IRenderer {
   constructor(
-    readonly createStore: IStoreFactory,
+    readonly createStore: IStoreFactory<State, A | any>,
     readonly RootComponent: React.ComponentType,
   ) {}
   render(state?: any) {

packages/client/src/store/createStore.ts

@@ -24,9 +24,9 @@ export function createStore<State, A extends Action>(
   params: ICreateStoreParams<State, A>,
 ) {
   const middleware = params.middleware || [new PromiseMiddleware().handle]
-  return create(
+  return (state?: DeepPartial<State>) => create(
     combineReducers(params.reducers),
-    params.state,
+    state,
     applyMiddleware(...middleware),
   )
 }

packages/client/src/test-utils/TestUtils.tsx

@@ -48,8 +48,7 @@ export class TestUtils {
   ) {
     const store = this.createStore({
       reducers: params.reducers,
-      state: params.state,
-    })
+    })(params.state)
     const Component = params.connector.connect(params.select)
 
     const render = (additionalProps: {[key: string]: any} = {}) => {