diff --git a/README.md b/README.md index a034885..d30c9f5 100644 --- a/README.md +++ b/README.md @@ -214,7 +214,6 @@ The `createWrapper` function accepts `makeStore` as its first argument. The `mak `createWrapper` also optionally accepts a config object as a second parameter: -- `storeKey` (optional, string) : the key used on `window` to persist the store on the client - `debug` (optional, boolean) : enable debug logging - `serializeState` and `deserializeState`: custom functions for serializing and deserializing the redux state, see [Custom serialization and deserialization](#custom-serialization-and-deserialization). diff --git a/packages/wrapper/src/index.tsx b/packages/wrapper/src/index.tsx index ada87b6..9ebf216 100644 --- a/packages/wrapper/src/index.tsx +++ b/packages/wrapper/src/index.tsx @@ -12,7 +12,6 @@ import { } from 'next'; export const HYDRATE = '__NEXT_REDUX_WRAPPER_HYDRATE__'; -export const STOREKEY = '__NEXT_REDUX_WRAPPER_STORE__'; const getIsServer = () => typeof window === 'undefined'; @@ -22,19 +21,16 @@ const getDeserializedState = (initialState: any, {deserializeSt const getSerializedState = (state: any, {serializeState}: Config = {}) => serializeState ? serializeState(state) : state; -const getStoreKey = ({storeKey}: Config = {}) => storeKey || STOREKEY; - export declare type MakeStore = (context: Context) => S; export interface InitStoreOptions { makeStore: MakeStore; context: Context; - config: Config; } -const initStore = ({makeStore, context, config}: InitStoreOptions): S => { - const storeKey = getStoreKey(config); +let store: any; +const initStore = ({makeStore, context}: InitStoreOptions): S => { const createStore = () => makeStore(context); if (getIsServer()) { @@ -48,15 +44,16 @@ const initStore = ({makeStore, context, config}: InitStoreOptio if (!req.__nextReduxWrapperStore) req.__nextReduxWrapperStore = createStore(); return req.__nextReduxWrapperStore; } + return createStore(); } // Memoize store if client - if (!(storeKey in window)) { - (window as any)[storeKey] = createStore(); + if (!store) { + store = createStore(); } - return (window as any)[storeKey]; + return store; }; export const createWrapper = (makeStore: MakeStore, config: Config = {}) => { @@ -67,7 +64,7 @@ export const createWrapper = (makeStore: MakeStore, config: callback: Callback; context: any; }): Promise => { - const store = initStore({context, makeStore, config}); + const store = initStore({context, makeStore}); if (config.debug) console.log(`1. getProps created store with state`, store.getState()); @@ -141,7 +138,7 @@ export const createWrapper = (makeStore: MakeStore, config: const initialStateFromGSPorGSSR = props?.pageProps?.initialState; if (!this.store) { - this.store = initStore({makeStore, config, context}); + this.store = initStore({makeStore, context}); if (config.debug) console.log('4. WrappedApp created new store with', displayName, { @@ -232,7 +229,6 @@ export type Context = NextPageContext | AppContext | GetStaticPropsContext | Get export interface Config { serializeState?: (state: ReturnType) => any; deserializeState?: (state: any) => ReturnType; - storeKey?: string; debug?: boolean; } diff --git a/packages/wrapper/tests/client.spec.tsx b/packages/wrapper/tests/client.spec.tsx index 718ecc4..a8d2112 100644 --- a/packages/wrapper/tests/client.spec.tsx +++ b/packages/wrapper/tests/client.spec.tsx @@ -7,23 +7,19 @@ import {DummyComponent, wrapper, child, makeStore} from './testlib'; import {createWrapper} from '../src'; import {Store} from 'redux'; -const w: {testStoreKey?: Store} = window as any; +let store: Store; const defaultState = {reduxStatus: 'init'}; describe('client integration', () => { - afterEach(() => { - delete w.testStoreKey; - }); - describe('existing store is taken from window', () => { beforeEach(() => { - w.testStoreKey = makeStore(); + store = makeStore(); }); test('withRedux', async () => { const WrappedPage: any = wrapper.withRedux(DummyComponent); - expect(child()).toEqual( + expect(child()).toEqual( '{"props":{},"state":{"reduxStatus":"init"}}', ); }); @@ -38,11 +34,11 @@ describe('client integration', () => { }); }); - test('store is available in window when created', async () => { - const wrapper = createWrapper(makeStore, {storeKey: 'testStoreKey'}); + test('store is available when calling getInitialProps client-side', async () => { + const wrapper = createWrapper(makeStore); const Page = () => null; Page.getInitialProps = wrapper.getInitialPageProps(store => () => null); await wrapper.withRedux(Page)?.getInitialProps({} as any); - expect(w.testStoreKey?.getState()).toEqual(defaultState); + expect(store.getState()).toEqual(defaultState); }); }); diff --git a/packages/wrapper/tests/testlib.tsx b/packages/wrapper/tests/testlib.tsx index cf7c15f..253adfa 100644 --- a/packages/wrapper/tests/testlib.tsx +++ b/packages/wrapper/tests/testlib.tsx @@ -24,7 +24,7 @@ export const reducer = (state: State = {reduxStatus: 'init'}, action: AnyAction) export const makeStore = () => createStore(reducer, undefined, applyMiddleware(promiseMiddleware)); -export const wrapper = createWrapper(makeStore, {storeKey: 'testStoreKey'}); +export const wrapper = createWrapper(makeStore); export const DummyComponent = (props: any) => { const state = useSelector((state: State) => state);