新增 useReducer useMethods

Author: niqingyang

docs/useMediatedState.md

@@ -0,0 +1,38 @@
+# `useMediatedState`
+
+A lot like the standard `useState`, but with mediation process.
+
+## Usage
+```jsx
+import { useMediatedState } from 'vue-next-use';
+
+const inputMediator = s => s.replace(/[\s]+/g, ' ');
+const Demo = () => {
+  const [state, setState] = useMediatedState(inputMediator, '');
+
+  return () => (
+    <div>
+      <div>You will not be able to enter more than one space</div>
+      <input type="text" min="0" max="10" 
+             value={state}
+             onChange={(ev) => {
+               setState(ev.target.value);
+             }}
+      />
+    </div>
+  );
+};
+```
+
+## Reference
+```ts
+const [state, setState] = useMediatedState<S=any>(
+  mediator: StateMediator<S>,
+  initialState?: S
+);
+```
+
+> Initial state will be set as-is.
+
+In case mediator expects 2 arguments it will receive the `setState` function as second argument, it is useful for async mediators.  
+>This hook will not cancel previous mediation when new one been invoked, you have to handle it yourself._

docs/useReducer.md

@@ -0,0 +1,44 @@
+# `useReducer`
+
+A lot like the standardreact `useReducer`, but with vue implementation.
+
+## Usage
+```jsx
+import { useReducer } from 'vue-next-use';
+
+const Demo = {
+    setup() {
+
+        const initializer = (initialState) => {
+            return isNaN(initialState) ? 0 : initialState;
+        };
+
+        const [state, dispatch] = useReducer((preState, action) => {
+            switch (action) {
+                case "increment":
+                    return preState + 1;
+                case "decrement":
+                    return preState - 1;
+            }
+            return preState;
+        }, undefined, initializer);
+
+        return () => (
+            <div>
+                <button onClick={() => dispatch('increment')}>increment</button>
+                <button onClick={() => dispatch('decrement')}>decrement</button>
+                <span style={{margin: "0 5px"}}>count: {state.value}</span>
+            </div>
+        );
+    },
+};
+```
+
+## Reference
+```ts
+const [state, dispatch] = useReducer<R extends (Reducer<any, any> | ReducerWithoutAction<any>), I>(
+    reducer: R,
+    initialState: I | ReducerState<R>,
+    initializer?: (arg: I | ReducerState<R>) => ReducerState<R>
+): [ComputedRef<I>, Dispatch<ReducerAction<R>> | DispatchWithoutAction]
+```

src/index.ts

@@ -49,4 +49,5 @@ export {default as useLongPress} from './useLongPress';
 export {default as useBattery} from './useBattery';
 export {default as useReactive} from './useReactive';
 export {default as useReadonly} from './useReadonly';
-export {default as useMediatedState} from './useMediatedState';
+export {default as useMediatedState} from './useMediatedState';
+export {default as useReducer} from './useReducer';

src/misc/types.ts

@@ -4,7 +4,23 @@ export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T
 
 export type FunctionReturningPromise = (...args: any[]) => Promise<any>;
 
+// Unlike the class component setState, the updates are not allowed to be partial
 export type SetStateAction<S> = S | ((prevState: S) => S);
+// this technically does accept a second argument, but it's already under a deprecation warning
+// and it's not even released so probably better to not define it.
+export type Dispatch<A> = (value: A) => void;
+// Since action _can_ be undefined, dispatch may be called without any parameters.
+export type DispatchWithoutAction = () => void;
+// Unlike redux, the actions _can_ be anything
+export type Reducer<S, A> = (prevState: S, action: A) => S;
+// If useReducer accepts a reducer without action, dispatch may be called without any parameters.
+export type ReducerWithoutAction<S> = (prevState: S) => S;
+// types used to try and prevent the compiler from reducing S
+// to a supertype common with the second argument to useReducer()
+export type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;
+export type ReducerAction<R extends Reducer<any, any>> = R extends Reducer<any, infer A> ? A : never;
+// The identity check is done with the SameValue algorithm (Object.is), which is stricter than ===
+export type ReducerStateWithoutAction<R extends ReducerWithoutAction<any>> = R extends ReducerWithoutAction<infer S> ? S : never;
 
 // NOTE: callbacks are _only_ allowed to return either void, or a destructor.
 // The destructor is itself only allowed to return void.

src/useMethods.ts

@@ -0,0 +1,43 @@
+import {ComputedRef, ref} from 'vue';
+import {useReducer} from "./index";
+import {Reducer} from './misc/types';
+
+type Action = {
+    type: string;
+    payload?: any;
+};
+
+type CreateMethods<M, T> = (
+    state: T
+) => {
+    [P in keyof M]: (payload?: any) => T;
+};
+
+type WrappedMethods<M> = {
+    [P in keyof M]: (...payload: any) => void;
+};
+
+const useMethods = <M, T>(
+    createMethods: CreateMethods<M, T>,
+    initialState: T
+): [ComputedRef<T>, WrappedMethods<M>] => {
+
+    const reducer: Reducer<T, Action> = (reducerState: T, action: Action) => {
+        return createMethods(reducerState)[action.type](...action.payload);
+    };
+
+    const [state, dispatch] = useReducer<Reducer<T, Action>>(reducer, initialState);
+
+    const wrappedMethods: WrappedMethods<M> = (() => {
+        const actionTypes = Object.keys(createMethods(initialState));
+
+        return actionTypes.reduce((acc, type) => {
+            acc[type] = (...payload) => dispatch({type, payload});
+            return acc;
+        }, {} as WrappedMethods<M>);
+    })();
+
+    return [state, wrappedMethods];
+};
+
+export default useMethods;

src/useReducer.ts

@@ -0,0 +1,31 @@
+import {ComputedRef} from "vue";
+import {useComputedState} from "./index";
+import {Dispatch, Reducer, ReducerAction, ReducerState, ReducerStateWithoutAction, DispatchWithoutAction, ReducerWithoutAction} from "./misc/types";
+import {resolveHookState} from './misc/hookState'
+
+function useReducer<R extends (Reducer<any, any> | ReducerWithoutAction<any>)>(
+    reducer: R,
+    initialState: ReducerState<R>,
+    initializer?: (arg: ReducerState<R>) => ReducerState<R>
+): [ComputedRef<ReducerState<R>>, Dispatch<ReducerAction<R>> | DispatchWithoutAction];
+
+function useReducer<R extends (Reducer<any, any> | ReducerWithoutAction<any>), I>(
+    reducer: R,
+    initialState: I | ReducerState<R>,
+    initializer?: (arg: I | ReducerState<R>) => ReducerState<R>
+): [ComputedRef<I>, Dispatch<ReducerAction<R>> | DispatchWithoutAction] {
+
+    if (initializer) {
+        initialState = initializer(resolveHookState(initialState));
+    }
+
+    const [state, setState] = useComputedState(initialState);
+
+    const dispatch: Dispatch<R> = (action) => {
+        setState(prevState => reducer(prevState, action))
+    };
+
+    return [state, dispatch];
+};
+
+export default useReducer;

stories/useMediatedState.stories.js

@@ -7,7 +7,7 @@ export default {
     argTypes: {},
 };
 
-// export const Docs = ShowDocs(require('../docs/useIdle.md'));
+export const Docs = ShowDocs(require('../docs/useMediatedState.md'));
 
 export const Demo = ShowDemo({
     setup() {

stories/useReducer.stories.tsx

@@ -0,0 +1,42 @@
+import {ShowDemo, ShowDocs} from './util/index';
+import {useReducer} from "../src/index";
+import {Reducer} from "../src/misc/types";
+
+export default {
+    title: 'State/useReducer',
+    argTypes: {},
+};
+
+export const Docs = ShowDocs(require('../docs/useReducer.md'));
+
+export const Demo = ShowDemo({
+    setup() {
+
+        // https://zh-hans.reactjs.org/docs/hooks-reference.html#usereducer
+        const initializer = (initialState) => {
+            return isNaN(initialState) ? 0 : initialState;
+        };
+
+        const [state, dispatch] = useReducer<Reducer<any, any>>((preState, action) => {
+            switch (action) {
+                case "increment":
+                    return preState + 1;
+                case "decrement":
+                    return preState - 1;
+            }
+            return preState;
+        }, 0, initializer);
+
+        return () => (
+            <div>
+                <button onClick={() => dispatch('increment')}>increment</button>
+                <button onClick={() => dispatch('decrement')}>decrement</button>
+                <span style={{margin: "0 5px"}}>count: {state.value}</span>
+            </div>
+        );
+    },
+});
+
+
+
+