.
├── lerna.json
├── package.json
├── packages
│   ├── configs
│   ├── demo
│   ├── demo-page
│   ├── demo-redux-toolkit
│   ├── demo-saga
│   ├── demo-saga-page
│   └── wrapper
└── yarn.lock

packages/wrapper
├── jest.config.js jest 配置
├── next-env.d.ts
├── package.json
├── src
│   └── index.tsx 核心實現(xiàn)代碼
├── tests 測試代碼
│   ├── client.spec.tsx
│   ├── server.spec.tsx
│   └── testlib.tsx
├── tsconfig.es6.json
└── tsconfig.json

// 用于客戶端 hydrate 的時發(fā)送初始化指令用的 action key
export const HYDRATE = '__NEXT_REDUX_WRAPPER_HYDRATE__';
// 用于判斷是否是服務器
const getIsServer = () => typeof window === 'undefined';
// 用于反序列化 State，類似解密函數(shù)
const getDeserializedState = <S extends Store>(initialState: any, {deserializeState}: Config<S> = {}) =>
    deserializeState ? deserializeState(initialState) : initialState;
// 用于序列化 State，類似加密函數(shù)
const getSerializedState = <S extends Store>(state: any, {serializeState}: Config<S> = {}) =>
    serializeState ? serializeState(state) : state;
// 客戶端存儲 store 用的變量
let sharedClientStore: any;
// 初始化 redux store
const initStore = <S extends Store>({makeStore, context = {}}: InitStoreOptions<S>): S => {
// ...
};
// 創(chuàng)建 wrapper
export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config: Config<S> = {}) => {
    // ...
    return {
        getServerSideProps,
        getStaticProps,
        getInitialAppProps,
        getInitialPageProps,
        // 以前的函數(shù)，忽略掉，不建議使用了
        withRedux,
        useWrappedStore,
    };
};
// 以前的函數(shù)，忽略掉，不建議使用了
export default <S extends Store>(makeStore: MakeStore<S>, config: Config<S> = {}) => {
    // ...
    return createWrapper(makeStore, config).withRedux;
};

// 創(chuàng)建 wrapper
export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config: Config<S> = {}) => {
    // 幾個 wrapper 函數(shù)的實際核心實現(xiàn)函數(shù)
    const makeProps = async (): Promise<WrapperProps> => {/** ... */};
    // 頁面級 getInitialProps 函數(shù)的包裹函數(shù)
    const getInitialPageProps = (callback) => async (context) => {/** ... */};
    // 應用級 getInitialProps 函數(shù)的包裹函數(shù)
    const getInitialAppProps = (callback) => async (context) => {/** ... */};
    // getStaticProps 函數(shù)的包裹函數(shù)
    const getStaticProps = (callback) => async (context) => {/** ... */};
    // getServerSideProps 函數(shù)的包裹函數(shù)
    const getServerSideProps = (callback) => async (context) => await getStaticProps(callback)(context);
    // hydrate 處理函數(shù)，調用 store.dispatch 發(fā)起初始化 
    const hydrate = (store: S, state: any) => {
        if (!state) {
            return;
        }
        store.dispatch({
            type: HYDRATE,
            payload: getDeserializedState<S>(state, config),
        } as any);
    };
    // hydrate 處理中間數(shù)據(jù)的函數(shù)（用于分析處理各種情況）
    const hydrateOrchestrator = (store: S, giapState: any, gspState: any, gsspState: any, gippState: any) => {
        //...
    };
    // redux hydrate 執(zhí)行 hook
    const useHybridHydrate = (store: S, giapState: any, gspState: any, gsspState: any, gippState: any) => {
        // ...
    };
    // 用于在應用中關聯(lián) store 的 hook。一般用在 App 組件
    // giapState stands for getInitialAppProps state
    const useWrappedStore = <P extends AppProps>(incomingProps: P, displayName = 'useWrappedStore'): {store: S; props: P} => {
        // ...
        return {store, props: {...initialProps, ...resultProps}};
    };
    return {
        getServerSideProps,
        getStaticProps,
        getInitialAppProps,
        getInitialPageProps,
        useWrappedStore,
    };
};

App.getInitialProps = wrapper.getInitialAppProps(({ store }) => async (ctx) => {
  // ...
});

// 頁面級 getInitialProps 函數(shù)的包裹函數(shù)
const getInitialPageProps =
    <P extends {} = any>(callback: PageCallback<S, P>): GetInitialPageProps<P> =>
    async (
        context: NextPageContext | any, // legacy
    ) => {
        // context 中會存儲 store — 避免雙重包裝，因為有可能上層組件也調用了 `getInitialPageProps` 或者 `getInitialAppProps` 函數(shù)。
        if ('getState' in context) {
            // 有緩存的 store ，直接給 callback 傳入的 store
            return callback && callback(context as any);
        }
        // 調用 makeProps 執(zhí)行開發(fā)者傳入要執(zhí)行的函數(shù)
        return await makeProps({callback, context, addStoreToContext: true});
    };
// 應用級 getInitialProps 函數(shù)的包裹函數(shù)
const getInitialAppProps =
    <P extends {} = any>(callback: AppCallback<S, P>): GetInitialAppProps<P> =>
    async (context: AppContext) => {
        // 調用 makeProps 執(zhí)行開發(fā)者傳入要執(zhí)行的函數(shù)
        const {initialProps, initialState} = await makeProps({callback, context, addStoreToContext: true});
        // 每個 `數(shù)據(jù)獲取函數(shù)` 最后需要的返回函數(shù)類型不一樣，因此需要處理成 Next.js 需要的類型
        return {
            ...initialProps,
            initialState,
        };
    };
// getStaticProps 函數(shù)的包裹函數(shù)
const getStaticProps =
    <P extends {} = any>(callback: GetStaticPropsCallback<S, P>): GetStaticProps<P> =>
    async context => {
        // 調用 makeProps 函數(shù)時，相比 getInitialPageProps 和 getInitialAppProps 缺少了 addStoreToContext 參數(shù)
        const {initialProps, initialState} = await makeProps({callback, context});
        return {
            ...initialProps,
            props: {
                ...initialProps.props,
                initialState,
            },
        } as any;
    };
// getServerSideProps 函數(shù)的包裹函數(shù)
const getServerSideProps =
    <P extends {} = any>(callback: GetServerSidePropsCallback<S, P>): GetServerSideProps<P> =>
    async context =>
        await getStaticProps(callback as any)(context); // 返回參數(shù)和static一樣，因此直接調用 getStaticProps 函數(shù)即可

// 數(shù)據(jù)獲取的 `wrapper 函數(shù)` 的實際核心
const makeProps = async ({
    callback,
    context,
    addStoreToContext = false,
}: {
    callback: Callback<S, any>;
    context: any;
    addStoreToContext?: boolean;
}): Promise<WrapperProps> => {
    // 服務端初始化 store
    const store = initStore({context, makeStore});
    if (config.debug) {
        console.log(`1. getProps created store with state`, store.getState());
    }
    // Legacy stuff - 把 store 放入 context 中
    if (addStoreToContext) {
        if (context.ctx) {
            context.ctx.store = store;
        } else {
            context.store = store;
        }
    }
    // 這里實現(xiàn)了 callback 雙層函數(shù)執(zhí)行，先傳遞 store 給 callback 生成新的函數(shù)
    const nextCallback = callback && callback(store);
    // 再用新的函數(shù)傳遞 context 參數(shù)，獲取 initialProps
    const initialProps = (nextCallback && (await nextCallback(context))) || {};
    if (config.debug) {
        console.log(`3. getProps after dispatches has store state`, store.getState());
    }
    const state = store.getState();
    return {
        initialProps,
        // 在服務端可以對 state 數(shù)據(jù)加密，防止被輕易解析
        initialState: getIsServer() ? getSerializedState<S>(state, config) : state,
    };
};

// 用于在應用中關聯(lián) store 的hook。
const useWrappedStore = <P extends AppProps>(incomingProps: P, displayName = 'useWrappedStore'): {store: S; props: P} => {
    // createWrapper 給 incomingProps 添加了 WrapperProps 類型，因為它們不是從 P 類型獲取，因此在這里進行強制賦予類型
    const {initialState: giapState, initialProps, ...props} = incomingProps as P & WrapperProps;
    // getStaticProps state
    const gspState = props?.__N_SSG ? props?.pageProps?.initialState : null;
    // getServerSideProps state
    const gsspState = props?.__N_SSP ? props?.pageProps?.initialState : null;
    // getInitialPageProps state
    const gippState = !gspState && !gsspState ? props?.pageProps?.initialState ?? null : null;
    // debug 打印代碼，刪除掉了
    if (config.debug) {}
    // 獲取store，initStore 會緩存 store ，有則直接緩存，沒有則進行初始化。
    const store = useMemo<S>(() => initStore<S>({makeStore}), []);
    // state 初始化
    useHybridHydrate(store, giapState, gspState, gsspState, gippState);
    // 后續(xù)余state 無關，主要是去掉
    let resultProps: any = props;
    // 順序很重要! Next.js 中 page 的 getStaticProps 應該覆蓋 pages/_app 中的 props
    // @see https://github.com/zeit/next.js/issues/11648
    if (initialProps && initialProps.pageProps) {
        resultProps.pageProps = {
            ...initialProps.pageProps, // this comes from wrapper in _app mode
            ...props.pageProps, // this comes from gssp/gsp in _app mode
        };
    }
    // 防止props中的 initialState被到處傳遞，為了數(shù)據(jù)安全，清除掉 initialState
    if (props?.pageProps?.initialState) {
        resultProps = {...props, pageProps: {...props.pageProps}};
        delete resultProps.pageProps.initialState;
    }
    // 處理 getInitialPageProps 的數(shù)據(jù)， 清除掉 initialProps
    if (resultProps?.pageProps?.initialProps) {
        resultProps.pageProps = {...resultProps.pageProps, ...resultProps.pageProps.initialProps};
        delete resultProps.pageProps.initialProps;
    }
    return {store, props: {...initialProps, ...resultProps}};
};

// 初始化 redux store
const initStore = <S extends Store>({makeStore, context = {}}: InitStoreOptions<S>): S => {
    const createStore = () => makeStore(context);
    if (getIsServer()) {
        // 服務端則存儲到 req.__nextReduxWrapperStore 參數(shù) 中進行服用
        const req: any = (context as NextPageContext)?.req || (context as AppContext)?.ctx?.req;
        if (req) {
            // ATTENTION! THIS IS INTERNAL, DO NOT ACCESS DIRECTLY ANYWHERE ELSE
            // @see https://github.com/kirill-konshin/next-redux-wrapper/pull/196#issuecomment-611673546
            if (!req.__nextReduxWrapperStore) {
                req.__nextReduxWrapperStore = createStore(); // Used in GIP/GSSP
            }
            return req.__nextReduxWrapperStore;
        }
        return createStore();
    }
    // Memoize the store if we're on the client
    // 客戶端則存儲到 sharedClientStore 上
    if (!sharedClientStore) {
        sharedClientStore = createStore();
    }
    return sharedClientStore;
};

// hydrate 初始化前置邏輯處理
const useHybridHydrate = (store: S, giapState: any, gspState: any, gsspState: any, gippState: any) => {
    const {events} = useRouter();
    const shouldHydrate = useRef(true);
    // 客戶端路由改變的時候好應該重新初始化。
    useEffect(() => {
        const handleStart = () => {
            shouldHydrate.current = true;
        };
        events?.on('routeChangeStart', handleStart);
        return () => {
            events?.off('routeChangeStart', handleStart);
        };
    }, [events]);
    // 這里寫了一大堆注釋，就是表面 useMemo 里面進行 hydrate 并不會導致頁面重新不斷渲染，主要是當作 constructor 來使用
    useMemo(() => {
        if (shouldHydrate.current) {
            hydrateOrchestrator(store, giapState, gspState, gsspState, gippState);
            shouldHydrate.current = false;
        }
    }, [store, giapState, gspState, gsspState, gippState]);
};

// hydrate 處理中間數(shù)據(jù)的函數(shù)（用于分析處理各種情況）
const hydrateOrchestrator = (store: S, giapState: any, gspState: any, gsspState: any, gippState: any) => {
    if (gspState) {
        // `getStaticProps` 并不能和其他數(shù)據(jù)獲取函數(shù)同時存在在一個頁面，但可能存在 `getInitialAppProps`，這時候只會在構建的時候執(zhí)行，因此需要覆蓋 `giapState`
        hydrate(store, giapState);
        hydrate(store, gspState);
    } else if (gsspState || gippState || giapState) {
        // 處理優(yōu)先級問題，getServerSideProps > getInitialPageProps > getInitialAppProps
        hydrate(store, gsspState ?? gippState ?? giapState);
    }
};

// hydrate 處理函數(shù)，觸發(fā)服務端渲染過程中的數(shù)據(jù) HYDRATE
const hydrate = (store: S, state: any) => {
    if (!state) {
        return;
    }
    store.dispatch({
        type: HYDRATE,
        payload: getDeserializedState<S>(state, config),
    } as any);
};