diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md index 4a31dfc34b..29470091ca 100644 --- a/docs/integrations/persisting-store-data.md +++ b/docs/integrations/persisting-store-data.md @@ -300,7 +300,7 @@ Or even to change the storage engine: ```ts useBoundStore.persist.setOptions({ - getStorage: () => sessionStorage, + storage: createJSONStorage(() => sessionStorage), }) ``` @@ -511,7 +511,7 @@ export const useBoundStore = create( }), { name: 'food-storage', // unique name - getStorage: () => storage, + storage: createJSONStorage(() => storage), } ) ) @@ -565,7 +565,7 @@ export const useBearStore = create()( }), { name: 'food-storage', // name of item in the storage (must be unique) - getStorage: () => sessionStorage, // (optional) by default the 'localStorage' is used + storage: createJSONStorage(() => sessionStorage), // (optional) by default the 'localStorage' is used partialize: (state) => ({ bears: state.bears }), } ) diff --git a/docs/previous-versions/zustand-v3-create-context.md b/docs/previous-versions/zustand-v3-create-context.md index 11d160789c..d763315fa4 100644 --- a/docs/previous-versions/zustand-v3-create-context.md +++ b/docs/previous-versions/zustand-v3-create-context.md @@ -6,7 +6,7 @@ nav: 18 A special `createContext` is provided since v3.5, which avoids misusing the store hook. -> **Note**: This function will likely be deprecated in v4 and removed in v5. +> **Note**: This function will be deprecated in v4 and removed in v5. ```jsx import create from 'zustand' diff --git a/readme.md b/readme.md index bb5375d4a3..4395e65506 100644 --- a/readme.md +++ b/readme.md @@ -172,8 +172,6 @@ const unsub1 = useDogStore.subscribe(console.log) useDogStore.setState({ paw: false }) // Unsubscribe listeners unsub1() -// Destroying the store (removing all listeners) -useDogStore.destroy() // You can of course use the hook as you always would const Component = () => { @@ -225,16 +223,18 @@ Zustand core can be imported and used without the React dependency. The only dif import { createStore } from 'zustand/vanilla' const store = createStore(() => ({ ... })) -const { getState, setState, subscribe, destroy } = store +const { getState, setState, subscribe } = store + +export default store ``` -You can even consume an existing vanilla store with React: +You can use a vanilla store with `useStore` hook available since v4. ```jsx -import { create } from 'zustand' +import { useStore } from 'zustand' import { vanillaStore } from './vanillaStore' -const useBoundStore = create(vanillaStore) +const useBoundStore = (selector) => useStore(vanillaStore, selector) ``` :warning: Note that middlewares that modify `set` or `get` are not applied to `getState` and `setState`. @@ -477,8 +477,6 @@ const Component = () => { ... ``` -[Alternatively, a special createContext is provided.](./docs/previous-versions/zustand-v3-create-context.md) - ## TypeScript Usage Basic typescript usage doesn't require anything special except for writing `create()(...)` instead of `create(...)`... diff --git a/src/context.ts b/src/context.ts index 9ffd9249d9..341a9092cb 100644 --- a/src/context.ts +++ b/src/context.ts @@ -21,7 +21,15 @@ type ExtractState = S extends { getState: () => infer T } ? T : never type WithoutCallSignature = { [K in keyof T]: T[K] } +/** + * @deprecated Use `createStore` and `useStore` for context usage + */ function createContext>() { + if (__DEV__) { + console.warn( + '[DEPRECATED] zustand/context will be removed in the future version. Please use `import { createStore, useStore } from "zustand"` for context usage. See: https://github.com/pmndrs/zustand/discussions/1180' + ) + } const ZustandContext = reactCreateContext(undefined) const Provider = ({ diff --git a/src/react.ts b/src/react.ts index 1f9d48f25b..ac221006e1 100644 --- a/src/react.ts +++ b/src/react.ts @@ -61,10 +61,18 @@ type Create = { (): ( initializer: StateCreator ) => UseBoundStore, Mos>> + /** + * @deprecated Use `useStore` hook to bind store + */ >(store: S): UseBoundStore } const createImpl = (createState: StateCreator) => { + if (__DEV__ && typeof createState !== 'function') { + console.warn( + '[DEPRECATED] Passing a vanilla store will be unsupported in the future version. Please use `import { useStore } from "zustand"` to use the vanilla store in React.' + ) + } const api = typeof createState === 'function' ? createStore(createState) : createState diff --git a/src/vanilla.ts b/src/vanilla.ts index a67f136ec9..d07dfe5d29 100644 --- a/src/vanilla.ts +++ b/src/vanilla.ts @@ -9,6 +9,9 @@ export interface StoreApi { setState: SetStateInternal getState: () => T subscribe: (listener: (state: T, prevState: T) => void) => () => void + /** + * @deprecated Use `unsubscribe` returned by `subscribe` + */ destroy: () => void } @@ -85,7 +88,15 @@ const createStoreImpl: CreateStoreImpl = (createState) => { return () => listeners.delete(listener) } - const destroy: StoreApi['destroy'] = () => listeners.clear() + const destroy: StoreApi['destroy'] = () => { + if (__DEV__) { + console.warn( + '[DEPRECATED] The destroy method will be unsupported in the future version. You should use unsubscribe function returned by subscribe. Everything will be garbage collected if store is garbage collected.' + ) + } + listeners.clear() + } + const api = { setState, getState, subscribe, destroy } state = createState(setState, getState, api) return api as any