Merge pull request #1835 from reduxjs/feature/ssr-support

Author: markerikson

package.json

@@ -40,7 +40,7 @@
     "coverage": "codecov"
   },
   "peerDependencies": {
-    "react": "^18.0.0-beta"
+    "react": "^18.0.0-rc"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -52,15 +52,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.1",
-    "@testing-library/react-12": "npm:@testing-library/react@^12",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/use-sync-external-store": "^0.0.3",
     "hoist-non-react-statics": "^3.3.2",
-    "react-17": "npm:react@^17",
-    "react-dom-17": "npm:react-dom@^17",
-    "react-is": "^18.0.0-beta-fdc1d617a-20211118",
-    "react-test-renderer-17": "npm:react-test-renderer@^17",
-    "use-sync-external-store": "1.0.0-beta-fdc1d617a-20211118"
+    "react-is": "^18.0.0-rc.0",
+    "use-sync-external-store": "^1.0.0-rc.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
@@ -81,6 +77,7 @@
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/jest-native": "^3.4.3",
     "@testing-library/react": "13.0.0-alpha.4",
+    "@testing-library/react-12": "npm:@testing-library/react@^12",
     "@testing-library/react-hooks": "^3.4.2",
     "@testing-library/react-native": "^7.1.0",
     "@types/object-assign": "^4.0.30",
@@ -104,9 +101,12 @@
     "jest": "^26.6.1",
     "prettier": "^2.1.2",
     "react": "18.0.0-beta-fdc1d617a-20211118",
+    "react-17": "npm:react@^17",
     "react-dom": "18.0.0-beta-fdc1d617a-20211118",
+    "react-dom-17": "npm:react-dom@^17",
     "react-native": "^0.64.1",
     "react-test-renderer": "18.0.0-beta-fdc1d617a-20211118",
+    "react-test-renderer-17": "npm:react-test-renderer@^17",
     "redux": "^4.0.5",
     "rimraf": "^3.0.2",
     "rollup": "^2.32.1",

src/components/Context.ts

@@ -8,6 +8,7 @@ export interface ReactReduxContextValue<
 > {
   store: Store<SS, A>
   subscription: Subscription
+  getServerState?: () => SS
 }
 
 export const ReactReduxContext =

src/components/Provider.tsx

@@ -4,32 +4,40 @@ import { createSubscription } from '../utils/Subscription'
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
 import { Action, AnyAction, Store } from 'redux'
 
-export interface ProviderProps<A extends Action = AnyAction> {
+export interface ProviderProps<A extends Action = AnyAction, S = any> {
   /**
    * The single Redux store in your application.
    */
-  store: Store<any, A>
+  store: Store<S, A>
+
+  /**
+   * An optional server state snapshot. Will be used during initial hydration render if available, to ensure that the UI output is consistent with the HTML generated on the server.
+   */
+  serverState?: S
+
   /**
    * Optional context to be used internally in react-redux. Use React.createContext() to create a context to be used.
    * If this is used, you'll need to customize `connect` by supplying the same context provided to the Provider.
    * Initial value doesn't matter, as it is overwritten with the internal state of Provider.
    */
-  context?: Context<ReactReduxContextValue<any, A>>
+  context?: Context<ReactReduxContextValue<S, A>>
   children: ReactNode
 }
 
 function Provider<A extends Action = AnyAction>({
   store,
   context,
   children,
+  serverState,
 }: ProviderProps<A>) {
   const contextValue = useMemo(() => {
     const subscription = createSubscription(store)
     return {
       store,
       subscription,
+      getServerState: serverState ? () => serverState : undefined,
     }
-  }, [store])
+  }, [store, serverState])
 
   const previousState = useMemo(() => store.getState(), [store])
 

src/components/connect.tsx

@@ -27,7 +27,10 @@ import defaultMapStateToPropsFactories from '../connect/mapStateToProps'
 import defaultMergePropsFactories from '../connect/mergeProps'
 
 import { createSubscription, Subscription } from '../utils/Subscription'
-import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
+import {
+  useIsomorphicLayoutEffect,
+  canUseDOM,
+} from '../utils/useIsomorphicLayoutEffect'
 import shallowEqual from '../utils/shallowEqual'
 
 import {
@@ -124,6 +127,7 @@ function subscribeUpdates(
       return
     }
 
+    // TODO We're currently calling getState ourselves here, rather than letting `uSES` do it
     const latestStoreState = store.getState()
 
     let newChildProps, error
@@ -157,6 +161,7 @@ function subscribeUpdates(
       childPropsFromStoreUpdate.current = newChildProps
       renderIsScheduled.current = true
 
+      // TODO This is hacky and not how `uSES` is meant to be used
       // Trigger the React `useSyncExternalStore` subscriber
       additionalSubscribeListener()
     }
@@ -597,6 +602,10 @@ function connect<
         ? props.store!
         : contextValue!.store
 
+      const getServerState = didStoreComeFromContext
+        ? contextValue.getServerState
+        : store.getState
+
       const childPropsSelector = useMemo(() => {
         // The child props selector needs the store reference as an input.
         // Re-create this selector whenever the store changes.
@@ -724,10 +733,14 @@ function connect<
 
       try {
         actualChildProps = useSyncExternalStore(
+          // TODO We're passing through a big wrapper that does a bunch of extra side effects besides subscribing
           subscribeForReact,
+          // TODO This is incredibly hacky. We've already processed the store update and calculated new child props,
+          // TODO and we're just passing that through so it triggers a re-render for us rather than relying on `uSES`.
           actualChildPropsSelector,
-          // TODO Need a real getServerSnapshot here
-          actualChildPropsSelector
+          getServerState
+            ? () => childPropsSelector(getServerState(), wrapperProps)
+            : actualChildPropsSelector
         )
       } catch (err) {
         if (latestSubscriptionCallbackError.current) {

src/hooks/useSelector.ts

@@ -48,13 +48,13 @@ export function createSelectorHook(
       }
     }
 
-    const { store } = useReduxContext()!
+    const { store, getServerState } = useReduxContext()!
 
     const selectedState = useSyncExternalStoreWithSelector(
       store.subscribe,
       store.getState,
       // TODO Need a server-side snapshot here
-      store.getState,
+      getServerState || store.getState,
       selector,
       equalityFn
     )

src/utils/useIsomorphicLayoutEffect.ts

@@ -9,9 +9,11 @@ import { useEffect, useLayoutEffect } from 'react'
 // is created synchronously, otherwise a store update may occur before the
 // subscription is created and an inconsistent state may be observed
 
-export const useIsomorphicLayoutEffect =
+// Matches logic in React's `shared/ExecutionEnvironment` file
+export const canUseDOM = !!(
   typeof window !== 'undefined' &&
   typeof window.document !== 'undefined' &&
   typeof window.document.createElement !== 'undefined'
-    ? useLayoutEffect
-    : useEffect
+)
+
+export const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect

yarn.lock

@@ -8837,7 +8837,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:18.0.0-beta-fdc1d617a-20211118, react-is@npm:^18.0.0-beta-fdc1d617a-20211118":
+"react-is@npm:18.0.0-beta-fdc1d617a-20211118":
   version: 18.0.0-beta-fdc1d617a-20211118
   resolution: "react-is@npm:18.0.0-beta-fdc1d617a-20211118"
   checksum: 402e28c80019e9deaee919c4373606736ea36142d1d1e09e0cab89d52e8bd647f1176a383987cca5c4e83bfee33bba8091ab347363ea4bdd4f9c3a707812c8b9
@@ -8858,6 +8858,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^18.0.0-rc.0":
+  version: 18.0.0-rc.0-next-f2a59df48-20211208
+  resolution: "react-is@npm:18.0.0-rc.0-next-f2a59df48-20211208"
+  checksum: e0f8b1c8ef759153072b7508f8832164651aa855c9c939d607090899d9d522c68ad12ec9630f34a56c46330542356207dfc09d744b8ffe2eccc45a83f296fcae
+  languageName: node
+  linkType: hard
+
 "react-native-codegen@npm:^0.0.6":
   version: 0.0.6
   resolution: "react-native-codegen@npm:0.0.6"
@@ -8966,7 +8973,7 @@ __metadata:
     react-17: "npm:react@^17"
     react-dom: 18.0.0-beta-fdc1d617a-20211118
     react-dom-17: "npm:react-dom@^17"
-    react-is: ^18.0.0-beta-fdc1d617a-20211118
+    react-is: ^18.0.0-rc.0
     react-native: ^0.64.1
     react-test-renderer: 18.0.0-beta-fdc1d617a-20211118
     react-test-renderer-17: "npm:react-test-renderer@^17"
@@ -8976,9 +8983,9 @@ __metadata:
     rollup-plugin-terser: ^7.0.2
     ts-jest: 26.5.6
     typescript: ^4.3.4
-    use-sync-external-store: 1.0.0-beta-fdc1d617a-20211118
+    use-sync-external-store: ^1.0.0-rc.0
   peerDependencies:
-    react: ^18.0.0-beta
+    react: ^18.0.0-rc
   peerDependenciesMeta:
     react-dom:
       optional: true
@@ -10845,12 +10852,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:1.0.0-beta-fdc1d617a-20211118":
-  version: 1.0.0-beta-fdc1d617a-20211118
-  resolution: "use-sync-external-store@npm:1.0.0-beta-fdc1d617a-20211118"
+"use-sync-external-store@npm:^1.0.0-rc.0":
+  version: 1.0.0-rc.0-next-f2a59df48-20211208
+  resolution: "use-sync-external-store@npm:1.0.0-rc.0-next-f2a59df48-20211208"
   peerDependencies:
-    react: 18.0.0-beta-fdc1d617a-20211118
-  checksum: bb52d87a886731595163a3b6a07b671f9ea92ca6de35791f32ce186e2fea0f2989088f3dacfea3dff258e866e767ff1e87d18494e436523e67b17e59051a22e0
+    react: 18.0.0-rc.0-next-f2a59df48-20211208
+  checksum: 772bf9fe4b47f9cf21969cc839e21e11e2fbad63e4992c75402fabed7048f5afb559bee289c9a0c3b4bad7c1c5724f6cb63c5499ef7f249c395e86233102bccb
   languageName: node
   linkType: hard