feat: useReducer

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

__test__/useReducer.ts

@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest'
+import type { Ref } from 'vue'
+import type { ReturnDisptch } from '../libs/types'
+
+import { useReducer } from '../libs/main'
+
+function reducer(state, action) {
+  if (action.type === 'add')
+    return state.value + 1
+
+  return state.value - 1
+}
+test('useReducer', () => {
+  const [state, dispatch] = useReducer<number>(reducer, 1)
+  expect((state as Ref<number>).value).toBe(1);
+  (dispatch as ReturnDisptch) ({ type: 'add' })
+  expect((state as Ref<number>).value).toBe(2)
+})
+
+test('useReducer has init ', () => {
+  const init = (arg: number) => {
+    return arg + 1
+  }
+  const [state, dispatch] = useReducer<number>(reducer, 1, init)
+  expect((state as Ref<number>).value).toBe(2);
+  (dispatch as ReturnDisptch) ({ type: 'add' })
+  expect((state as Ref<number>).value).toBe(3)
+})

libs/hooks/index.ts

@@ -1,5 +1,7 @@
 import useState from './useState'
+import useReducer from './useReducer'
 
 export {
   useState,
+  useReducer,
 }

libs/hooks/useReducer.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'vue'
+import type { Action, Init, Reducer, ReturnDisptch, SetStateSetter } from '../types/index'
+import { isFunc } from '../utils/index'
+import useState from './useState'
+
+export default function useReducer<U>(reducer: Reducer<U>, initArg: U, init?: Init<U>) {
+  let lastInit: U = initArg
+  if (init && isFunc(init))
+    lastInit = init(lastInit)
+
+  const [_state, setState] = useState<U>(lastInit)
+
+  const _dispatch = createDispatch<U>(reducer, _state, setState)
+
+  return [_state, _dispatch]
+}
+
+function createDispatch<T>(reducer: Reducer<T>, _state: Ref<T>, setState: SetStateSetter<T>): ReturnDisptch {
+  return function (action: Action) {
+    setState (reducer (_state, action))
+  }
+}

libs/types/index.ts

@@ -1 +1,12 @@
+import type { Ref } from 'vue'
+
 export type SetStateSetter<U> = (newState: U) => void
+export interface Action {
+  type: string
+}
+
+export type Reducer<T> = (state: Ref<T>, action: Action) => T
+
+export type Init<T> = (init: T) => T
+
+export type ReturnDisptch = (action: Action) => void

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kalu5/vue_hooks",
   "type": "module",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "private": false,
   "description": "This is vue3 hooks utils",
   "author": "lujialong",

vitest.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
+    include: ['__test__/**'],
     coverage: {
       include: [
         'libs/**',