refactor(createUseStorageState): adjust type of defaultValue and up…

…date docs (alibaba#2148) * refactor(createUseStorageState): strong type and make the type of updater conform to doc * test: update type * refactor: simplify the usage of default value * refactor: remove extra type --------- Co-authored-by: lxr <[email protected]>
jiaoruogu · Jul 12, 2023 · 33caa72 · 33caa72
1 parent 80f7226
commit 33caa72
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/packages/hooks/src/createUseStorageState/__tests__/index.test.ts b/packages/hooks/src/createUseStorageState/__tests__/index.test.ts
@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
-import type { IFuncUpdater } from '../index';
+import type { Options } from '../index';
 import { createUseStorageState } from '../index';
 
 class TestStorage implements Storage {
@@ -41,9 +41,8 @@ class TestStorage implements Storage {
  }
 }
 
-interface StorageStateProps<T> {
+interface StorageStateProps<T> extends Pick<Options<T>, 'defaultValue'> {
  key: string;
- defaultValue?: T | IFuncUpdater<T>;
 }
 
 describe('useStorageState', () => {

diff --git a/packages/hooks/src/createUseStorageState/index.ts b/packages/hooks/src/createUseStorageState/index.ts
@@ -1,20 +1,14 @@
-/* eslint-disable no-empty */
 import { useState } from 'react';
 import useMemoizedFn from '../useMemoizedFn';
 import useUpdateEffect from '../useUpdateEffect';
 import { isFunction, isUndef } from '../utils';
 
-export interface IFuncUpdater<T> {
- (previousState?: T): T;
-}
-export interface IFuncStorage {
- (): Storage;
-}
+export type SetState<S> = S | ((prevState?: S) => S);
 
 export interface Options<T> {
+ defaultValue?: T | (() => T);
  serializer?: (value: T) => string;
  deserializer?: (value: string) => T;
- defaultValue?: T | IFuncUpdater<T>;
  onError?: (error: unknown) => void;
 }
 
@@ -63,13 +57,13 @@ export function createUseStorageState(getStorage: () => Storage | undefined) {
  return options.defaultValue;
  }
 
- const [state, setState] = useState(() => getStoredValue());
+ const [state, setState] = useState(getStoredValue);
 
  useUpdateEffect(() => {
  setState(getStoredValue());
  }, [key]);
 
- const updateState = (value?: T | IFuncUpdater<T>) => {
+ const updateState = (value?: SetState<T>) => {
  const currentState = isFunction(value) ? value(state) : value;
  setState(currentState);
 

diff --git a/packages/hooks/src/useLocalStorageState/index.en-US.md b/packages/hooks/src/useLocalStorageState/index.en-US.md
@@ -26,18 +26,28 @@ A Hook that store state into localStorage.
 If you want to delete this record from localStorage, you can use `setState()` or `setState(undefined)`.
 
 ```typescript
+type SetState<S> = S | ((prevState?: S) => S);
+
 interface Options<T> {
  defaultValue?: T | (() => T);
  serializer?: (value: T) => string;
  deserializer?: (value: string) => T;
+ onError?: (error: unknown) => void;
 }
 
 const [state, setState] = useLocalStorageState<T>(
  key: string,
  options: Options<T>
-): [T?, (value?: T | ((previousState: T) => T)) => void];
+): [T?, (value?: SetState<T>) => void];
 ```
 
+### Result
+
+| Property | Description | Type |
+| -------- | --------------------------- | ------------------------------- |
+| state | Local `localStorage` value | `T` |
+| setState | Update `localStorage` value | `(value?: SetState<T>) => void` |
+
 ### Options
 
 | Property | Description | Type | Default |

diff --git a/packages/hooks/src/useLocalStorageState/index.zh-CN.md b/packages/hooks/src/useLocalStorageState/index.zh-CN.md
@@ -26,18 +26,28 @@ nav:
 如果想从 localStorage 中删除这条数据，可以使用 `setState()` 或 `setState(undefined)` 。
 
 ```typescript
+type SetState<S> = S | ((prevState?: S) => S);
+
 interface Options<T> {
  defaultValue?: T | (() => T);
  serializer?: (value: T) => string;
  deserializer?: (value: string) => T;
+ onError?: (error: unknown) => void;
 }
 
 const [state, setState] = useLocalStorageState<T>(
  key: string,
  options: Options<T>
-): [T?, (value?: T | ((previousState: T) => T)) => void];
+): [T?, (value?: SetState<T>) => void];
 ```
 
+### Result
+
+| 参数 | 说明 | 类型 |
+| -------- | ---------------------- | ------------------------------- |
+| state | 本地 `localStorage` 值 | `T` |
+| setState | 设置 `localStorage` 值 | `(value?: SetState<T>) => void` |
+
 ### Options
 
 | 参数 | 说明 | 类型 | 默认值 |