@jcoreio/zod-forms 1.2.1 → 2.0.0-beta.2

package/src/FormState.ts

@@ -1,4 +1,5 @@
 import z from 'zod'
+import { DeepPartial } from './util/DeepPartial'
 
 export type FieldMeta = {
   touched: boolean
@@ -6,8 +7,11 @@ export type FieldMeta = {
 }
 
 export type SubmitHandler<T extends z.ZodTypeAny> = (
-  values: z.output<T>,
-  options: { initialValues: z.output<T> }
+  parsedValues: z.output<T>,
+  options: {
+    initialValues?: DeepPartial<z.input<T>>
+    initialParsedValues?: z.output<T>
+  }
 ) => void | Promise<void>
 
 export type SubmitSuccededHandler = () => void
@@ -18,12 +22,12 @@ export type FormState<T extends z.ZodTypeAny> = {
   mounted: boolean
   initialized: boolean
   fieldMeta: Record<string, FieldMeta>
-  rawValues?: unknown
-  values?: z.output<T>
-  submittedValues?: z.output<T>
-  rawSubmittedValues?: z.input<T>
-  rawInitialValues?: unknown
-  initialValues?: z.output<T>
+  values?: DeepPartial<z.input<T>>
+  parsedValues?: z.output<T>
+  submittedParsedValues?: z.output<T>
+  submittedValues?: z.input<T>
+  initialValues?: DeepPartial<z.input<T>>
+  initialParsedValues?: z.output<T>
   validationError?: any
   submitPromise?: Promise<void>
   onSubmit: Set<SubmitHandler<T>>

package/src/actions/arrayActions.ts

@@ -1,40 +1,41 @@
-import { FieldPathForValue } from '../FieldPath'
+import { FieldPathForParsedValue } from '../FieldPath'
 import z from 'zod'
+import { DeepPartial } from '../util/DeepPartial'
 
-export type ArrayFieldPath<V = any, R = any> = FieldPathForValue<
+export type ArrayFieldPath<V = any, R = any> = FieldPathForParsedValue<
   V[] | null | undefined,
   R[] | null | undefined
 >
 
-type ValueFor<Field extends ArrayFieldPath> = NonNullable<
+type ParsedValueFor<Field extends ArrayFieldPath> = NonNullable<
   z.output<Field['schema']>
 >[number]
 
-type RawValueFor<Field extends ArrayFieldPath> = NonNullable<
-  z.input<Field['schema']>
->[number]
+type ValueFor<Field extends ArrayFieldPath> = DeepPartial<
+  NonNullable<z.input<Field['schema']>>[number]
+>
 
-export type ArrayInsertAction<Field extends ArrayFieldPath = ArrayFieldPath> =
-  ReturnType<typeof arrayInsert<Field>>
+export type ArrayInsertParsedAction<
+  Field extends ArrayFieldPath = ArrayFieldPath
+> = ReturnType<typeof arrayInsertParsed<Field>>
 
-export function arrayInsert<Field extends ArrayFieldPath>(
+export function arrayInsertParsed<Field extends ArrayFieldPath>(
   field: Field,
   index: number,
-  value: ValueFor<Field>
+  parsedValue: ParsedValueFor<Field>
 ) {
-  return { type: 'arrayInsert', field, index, value } as const
+  return { type: 'arrayInsertParsed', field, index, parsedValue } as const
 }
 
-export type ArrayInsertRawAction<
-  Field extends ArrayFieldPath = ArrayFieldPath
-> = ReturnType<typeof arrayInsertRaw<Field>>
+export type ArrayInsertAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arrayInsert<Field>>
 
-export function arrayInsertRaw<Field extends ArrayFieldPath>(
+export function arrayInsert<Field extends ArrayFieldPath>(
   field: Field,
   index: number,
-  rawValue: RawValueFor<Field>
+  value: ValueFor<Field>
 ) {
-  return { type: 'arrayInsertRaw', field, index, rawValue } as const
+  return { type: 'arrayInsert', field, index, value } as const
 }
 
 export type ArrayMoveAction = ReturnType<typeof arrayMove>
@@ -49,24 +50,25 @@ export function arrayPop(field: ArrayFieldPath) {
   return { type: 'arrayPop', field } as const
 }
 
-export type ArrayPushAction<Field extends ArrayFieldPath = ArrayFieldPath> =
-  ReturnType<typeof arrayPush<Field>>
+export type ArrayPushParsedAction<
+  Field extends ArrayFieldPath = ArrayFieldPath
+> = ReturnType<typeof arrayPushParsed<Field>>
 
-export function arrayPush<Field extends ArrayFieldPath>(
+export function arrayPushParsed<Field extends ArrayFieldPath>(
   field: Field,
-  value: ValueFor<Field>
+  parsedValue: ParsedValueFor<Field>
 ) {
-  return { type: 'arrayPush', field, value } as const
+  return { type: 'arrayPushParsed', field, parsedValue } as const
 }
 
-export type ArrayPushRawAction<Field extends ArrayFieldPath = ArrayFieldPath> =
-  ReturnType<typeof arrayPushRaw<Field>>
+export type ArrayPushAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arrayPush<Field>>
 
-export function arrayPushRaw<Field extends ArrayFieldPath>(
+export function arrayPush<Field extends ArrayFieldPath>(
   field: Field,
-  rawValue: RawValueFor<Field>
+  value: ValueFor<Field>
 ) {
-  return { type: 'arrayPushRaw', field, rawValue } as const
+  return { type: 'arrayPush', field, value } as const
 }
 
 export type ArrayRemoveAction = ReturnType<typeof arrayRemove>
@@ -87,34 +89,40 @@ export function arrayShift(field: ArrayFieldPath) {
   return { type: 'arrayShift', field } as const
 }
 
-export type ArraySpliceAction<Field extends ArrayFieldPath = ArrayFieldPath> =
-  ReturnType<typeof arraySplice<Field>>
+export type ArraySpliceParsedAction<
+  Field extends ArrayFieldPath = ArrayFieldPath
+> = ReturnType<typeof arraySpliceParsed<Field>>
 
-export function arraySplice<Field extends ArrayFieldPath>(
+export function arraySpliceParsed<Field extends ArrayFieldPath>(
   field: Field,
   index: number,
   deleteCount: number,
-  ...values: ValueFor<Field>[]
+  ...parsedValues: ParsedValueFor<Field>[]
 ) {
-  return { type: 'arraySplice', field, index, deleteCount, values } as const
+  return {
+    type: 'arraySpliceParsed',
+    field,
+    index,
+    deleteCount,
+    parsedValues,
+  } as const
 }
 
-export type ArraySpliceRawAction<
-  Field extends ArrayFieldPath = ArrayFieldPath
-> = ReturnType<typeof arraySpliceRaw<Field>>
+export type ArraySpliceAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arraySplice<Field>>
 
-export function arraySpliceRaw<Field extends ArrayFieldPath>(
+export function arraySplice<Field extends ArrayFieldPath>(
   field: Field,
   index: number,
   deleteCount: number,
-  ...rawValues: RawValueFor<Field>[]
+  ...values: ValueFor<Field>[]
 ) {
   return {
-    type: 'arraySpliceRaw',
+    type: 'arraySplice',
     field,
     index,
     deleteCount,
-    rawValues,
+    values,
   } as const
 }
 
@@ -128,56 +136,56 @@ export function arraySwap(
   return { type: 'arraySwap', field, indexA, indexB } as const
 }
 
-export type ArrayUnshiftAction<Field extends ArrayFieldPath = ArrayFieldPath> =
-  ReturnType<typeof arrayUnshift<Field>>
+export type ArrayUnshiftParsedAction<
+  Field extends ArrayFieldPath = ArrayFieldPath
+> = ReturnType<typeof arrayUnshiftParsed<Field>>
 
-export function arrayUnshift<Field extends ArrayFieldPath>(
+export function arrayUnshiftParsed<Field extends ArrayFieldPath>(
   field: Field,
-  value: ValueFor<Field>
+  parsedValue: ParsedValueFor<Field>
 ) {
-  return { type: 'arrayUnshift', field, value } as const
+  return { type: 'arrayUnshiftParsed', field, parsedValue } as const
 }
 
-export type ArrayUnshiftRawAction<
-  Field extends ArrayFieldPath = ArrayFieldPath
-> = ReturnType<typeof arrayUnshiftRaw<Field>>
+export type ArrayUnshiftAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arrayUnshift<Field>>
 
-export function arrayUnshiftRaw<Field extends ArrayFieldPath>(
+export function arrayUnshift<Field extends ArrayFieldPath>(
   field: Field,
-  rawValue: RawValueFor<Field>
+  value: ValueFor<Field>
 ) {
-  return { type: 'arrayUnshiftRaw', field, rawValue } as const
+  return { type: 'arrayUnshift', field, value } as const
 }
 
 export type ArrayAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  | ArrayInsertParsedAction<Field>
   | ArrayInsertAction<Field>
-  | ArrayInsertRawAction<Field>
   | ArrayMoveAction
   | ArrayPopAction
+  | ArrayPushParsedAction<Field>
   | ArrayPushAction<Field>
-  | ArrayPushRawAction<Field>
   | ArrayRemoveAction
   | ArrayRemoveAllAction
   | ArrayShiftAction
+  | ArraySpliceParsedAction<Field>
   | ArraySpliceAction<Field>
-  | ArraySpliceRawAction<Field>
   | ArraySwapAction
+  | ArrayUnshiftParsedAction<Field>
   | ArrayUnshiftAction<Field>
-  | ArrayUnshiftRawAction<Field>
 
 export const arrayActions = {
+  insertParsed: arrayInsertParsed,
   insert: arrayInsert,
-  insertRaw: arrayInsertRaw,
   move: arrayMove,
   pop: arrayPop,
+  pushParsed: arrayPushParsed,
   push: arrayPush,
-  pushRaw: arrayPushRaw,
   remove: arrayRemove,
   removeAll: arrayRemoveAll,
   shift: arrayShift,
+  spliceParsed: arraySpliceParsed,
   splice: arraySplice,
-  spliceRaw: arraySpliceRaw,
   swap: arraySwap,
+  unshiftParsed: arrayUnshiftParsed,
   unshift: arrayUnshift,
-  unshiftRaw: arrayUnshiftRaw,
 }

package/src/actions/initialize.ts

@@ -1,12 +1,13 @@
 import z from 'zod'
+import { DeepPartial } from '../util/DeepPartial'
 
 export type InitializeAction<T extends z.ZodTypeAny> = ReturnType<
   typeof initialize<T>
 >
 
 export function initialize<T extends z.ZodTypeAny>(props: {
-  rawValues?: z.input<T>
-  values?: z.output<T>
+  values?: DeepPartial<z.input<T>>
+  parsedValues?: z.output<T>
   keepSubmitSucceeded?: boolean
 }) {
   return {

package/src/actions/setParsedValue.ts

@@ -0,0 +1,21 @@
+import z from 'zod'
+import { FieldPath } from '../FieldPath'
+
+export type SetParsedValueAction<Field extends FieldPath> = ReturnType<
+  typeof setParsedValue<Field>
+>
+
+export function setParsedValue<Field extends FieldPath>(
+  field: Field,
+  parsedValue: z.output<Field['schema']>,
+  options?: {
+    normalize?: boolean
+  }
+) {
+  return {
+    type: 'setParsedValue',
+    field,
+    parsedValue,
+    ...options,
+  } as const
+}

package/src/actions/setSubmitStatus.ts

@@ -14,8 +14,8 @@ export function setSubmitStatus<T extends z.ZodTypeAny>(
       | 'submitPromise'
       | 'submitSucceeded'
       | 'submitFailed'
+      | 'submittedParsedValues'
       | 'submittedValues'
-      | 'rawSubmittedValues'
     >
   >
 ) {

package/src/actions/setValue.ts

@@ -1,5 +1,6 @@
 import z from 'zod'
 import { FieldPath } from '../FieldPath'
+import { DeepPartial } from '../util/DeepPartial'
 
 export type SetValueAction<Field extends FieldPath> = ReturnType<
   typeof setValue<Field>
@@ -7,15 +8,11 @@ export type SetValueAction<Field extends FieldPath> = ReturnType<
 
 export function setValue<Field extends FieldPath>(
   field: Field,
-  value: z.output<Field['schema']>,
-  options?: {
-    normalize?: boolean
-  }
+  value: DeepPartial<z.input<Field['schema']>>
 ) {
   return {
     type: 'setValue',
     field,
     value,
-    ...options,
   } as const
 }

package/src/createFormMiddleware.ts

@@ -22,19 +22,21 @@ export function createFormMiddleware<T extends z.ZodTypeAny>(): Middleware<
         onSubmit,
         onSubmitSucceeded,
         onSubmitFailed,
+        parsedValues,
         values,
-        rawValues,
         initialValues,
+        initialParsedValues,
       } = nextState
       const submitPromise = (async () => {
         if (nextState.validationError) throw nextState.validationError
-        for (const fn of onSubmit) await fn(values, { initialValues })
+        for (const fn of onSubmit)
+          await fn(parsedValues, { initialValues, initialParsedValues })
       })()
       store.dispatch(
         setSubmitStatus({
           submitting: true,
+          submittedParsedValues: parsedValues,
           submittedValues: values,
-          rawSubmittedValues: rawValues,
           submitError: undefined,
           submitSucceeded: false,
           submitFailed: false,

package/src/createFormProvider.tsx

@@ -7,8 +7,8 @@ import { FormAction } from './FormAction'
 import { FormState } from './FormState'
 import { Provider } from 'react-redux'
 import { initialize } from './actions/initialize'
-import { setRawValue } from './actions/setRawValue'
 import { setValue } from './actions/setValue'
+import { setParsedValue } from './actions/setParsedValue'
 import { FormContext, FormContextProps } from './FormContext'
 import { FormStateContext } from './FormStateContext'
 import { createFormMiddleware } from './createFormMiddleware'
@@ -41,14 +41,17 @@ export const createFormProvider = <T extends z.ZodTypeAny>(
     const store = storeRef.current
     const { dispatch } = store
 
+    const getParsedValues = React.useCallback(
+      () => store.getState().parsedValues,
+      []
+    )
     const getValues = React.useCallback(() => store.getState().values, [])
-    const getRawValues = React.useCallback(() => store.getState().rawValues, [])
-    const getInitialValues = React.useCallback(
-      () => store.getState().initialValues,
+    const getInitialParsedValues = React.useCallback(
+      () => store.getState().initialParsedValues,
       []
     )
-    const getRawInitialValues = React.useCallback(
-      () => store.getState().rawInitialValues,
+    const getInitialValues = React.useCallback(
+      () => store.getState().initialValues,
       []
     )
     const getStatus = React.useCallback(
@@ -65,10 +68,10 @@ export const createFormProvider = <T extends z.ZodTypeAny>(
     const formContext = React.useMemo(
       (): FormContextProps<T> => ({
         ...props,
+        getParsedValues,
         getValues,
-        getRawValues,
+        getInitialParsedValues,
         getInitialValues,
-        getRawInitialValues,
         getStatus,
         ...bindActionCreators(
           {
@@ -78,8 +81,8 @@ export const createFormProvider = <T extends z.ZodTypeAny>(
             submit,
             setSubmitStatus: setSubmitStatus<T>,
             setMeta: setMeta as any,
-            setRawValue: setRawValue as any,
             setValue: setValue as any,
+            setParsedValue: setParsedValue as any,
           },
           dispatch
         ),

package/src/createFormReducer.ts

@@ -5,8 +5,8 @@ import { FormState } from './FormState'
 import { initFormState } from './initFormState'
 import { addHandlersReducer } from './reducers/addHandlers'
 import { removeHandlersReducer } from './reducers/removeHandlers'
+import { createSetParsedValueReducer } from './reducers/setParsedValue'
 import { createSetValueReducer } from './reducers/setValue'
-import { createSetRawValueReducer } from './reducers/setRawValue'
 import { setMetaReducer } from './reducers/setMeta'
 import { submitSucceededReducer } from './reducers/submitSucceeded'
 import { setSubmitStatusReducer } from './reducers/setSubmitStatus'
@@ -17,22 +17,22 @@ import { arrayRemoveReducer } from './reducers/arrayRemove'
 import { arrayRemoveAllReducer } from './reducers/arrayRemoveAll'
 import { arrayShiftReducer } from './reducers/arrayShift'
 import { arraySwapReducer } from './reducers/arraySwap'
-import { arrayPushRawReducer } from './reducers/arrayPushRaw'
-import { arrayInsertRawReducer } from './reducers/arrayInsertRaw'
-import { arraySpliceRawReducer } from './reducers/arraySpliceRaw'
-import { arrayUnshiftRawReducer } from './reducers/arrayUnshiftRaw'
 import { arrayPushReducer } from './reducers/arrayPush'
-import { arrayUnshiftReducer } from './reducers/arrayUnshift'
 import { arrayInsertReducer } from './reducers/arrayInsert'
 import { arraySpliceReducer } from './reducers/arraySplice'
+import { arrayUnshiftReducer } from './reducers/arrayUnshift'
+import { arrayPushParsedReducer } from './reducers/arrayPushParsed'
+import { arrayUnshiftParsedReducer } from './reducers/arrayUnshiftParsed'
+import { arrayInsertParsedReducer } from './reducers/arrayInsertParsed'
+import { arraySpliceParsedReducer } from './reducers/arraySpliceParsed'
 
 export function createFormReducer<T extends z.ZodTypeAny>(options: {
   schema: T
   inverseSchema: z.ZodType<z.input<T>, any, z.output<T>>
 }): Reducer<FormState<T>, FormAction<T>> {
   const initializeReducer = createInitializeReducer(options)
+  const setParsedValueReducer = createSetParsedValueReducer(options)
   const setValueReducer = createSetValueReducer(options)
-  const setRawValueReducer = createSetRawValueReducer(options)
   const formReducer = (
     state: FormState<T> = initFormState(),
     action: FormAction<T>
@@ -50,40 +50,40 @@ export function createFormReducer<T extends z.ZodTypeAny>(options: {
         return setSubmitStatusReducer(state, action)
       case 'submitSucceeded':
         return submitSucceededReducer(state)
+      case 'setParsedValue':
+        return setParsedValueReducer(state, action)
       case 'setValue':
         return setValueReducer(state, action)
-      case 'setRawValue':
-        return setRawValueReducer(state, action)
       case 'setMeta':
         return setMetaReducer(state, action)
+      case 'arrayInsertParsed':
+        return arrayInsertParsedReducer(formReducer, state, action)
       case 'arrayInsert':
         return arrayInsertReducer(formReducer, state, action)
-      case 'arrayInsertRaw':
-        return arrayInsertRawReducer(formReducer, state, action)
       case 'arrayMove':
         return arrayMoveReducer(formReducer, state, action)
       case 'arrayPop':
         return arrayPopReducer(formReducer, state, action)
+      case 'arrayPushParsed':
+        return arrayPushParsedReducer(formReducer, state, action)
       case 'arrayPush':
         return arrayPushReducer(formReducer, state, action)
-      case 'arrayPushRaw':
-        return arrayPushRawReducer(formReducer, state, action)
       case 'arrayRemove':
         return arrayRemoveReducer(formReducer, state, action)
       case 'arrayRemoveAll':
         return arrayRemoveAllReducer(formReducer, state, action)
       case 'arrayShift':
         return arrayShiftReducer(formReducer, state, action)
+      case 'arraySpliceParsed':
+        return arraySpliceParsedReducer(formReducer, state, action)
       case 'arraySplice':
         return arraySpliceReducer(formReducer, state, action)
-      case 'arraySpliceRaw':
-        return arraySpliceRawReducer(formReducer, state, action)
       case 'arraySwap':
         return arraySwapReducer(formReducer, state, action)
+      case 'arrayUnshiftParsed':
+        return arrayUnshiftParsedReducer(formReducer, state, action)
       case 'arrayUnshift':
         return arrayUnshiftReducer(formReducer, state, action)
-      case 'arrayUnshiftRaw':
-        return arrayUnshiftRawReducer(formReducer, state, action)
     }
     return state
   }

package/src/createSelectFormStatus.ts

@@ -22,20 +22,20 @@ export function createSelectFormStatus() {
     [
       createSelector(
         [
-          (state: FormState<any>) => state.values,
-          (state: FormState<any>) => state.initialValues,
+          (state: FormState<any>) => state.parsedValues,
+          (state: FormState<any>) => state.initialParsedValues,
         ],
         isEqual
       ),
       createSelector(
         [
-          (state: FormState<any>) => state.rawValues,
-          (state: FormState<any>) => state.rawInitialValues,
+          (state: FormState<any>) => state.values,
+          (state: FormState<any>) => state.initialValues,
         ],
         isEqual
       ),
     ],
-    (pristine, rawPristine) => pristine && rawPristine
+    (parsedPristine, pristine) => parsedPristine && pristine
   )
 
   return createStructuredSelector({

package/src/createSelectFormValues.ts

@@ -8,9 +8,9 @@ export type SelectFormValues<T extends z.ZodTypeAny> = ReturnType<
 
 export function createSelectFormValues<T extends z.ZodTypeAny>() {
   return createStructuredSelector({
+    parsedValues: (state: FormState<T>) => state.parsedValues,
     values: (state: FormState<T>) => state.values,
-    rawValues: (state: FormState<T>) => state.rawValues,
+    initialParsedValues: (state: FormState<T>) => state.initialParsedValues,
     initialValues: (state: FormState<T>) => state.initialValues,
-    rawInitialValues: (state: FormState<T>) => state.rawInitialValues,
   })
 }

package/src/index.ts

@@ -7,8 +7,8 @@ export {
 } from './FormState'
 export {
   FieldPath,
+  type FieldPathForParsedValue,
   type FieldPathForValue,
-  type FieldPathForRawValue,
 } from './FieldPath'
 export { useField, type UseFieldProps, type TypedUseField } from './useField'
 export {

package/src/initFormState.ts

@@ -6,8 +6,8 @@ export function initFormState<T extends z.ZodTypeAny>(): FormState<T> {
     mounted: true,
     initialized: false,
     fieldMeta: {},
-    rawInitialValues: undefined,
     initialValues: undefined,
+    initialParsedValues: undefined,
     submitting: false,
     submitFailed: false,
     submitSucceeded: false,

package/src/reducers/arrayInsert.ts

@@ -1,9 +1,9 @@
 import z from 'zod'
 import { FormState } from '../FormState'
-import { arrayInsertRaw, ArrayInsertAction } from '../actions/arrayActions'
+import { ArrayInsertAction } from '../actions/arrayActions'
 import { Reducer } from 'redux'
 import { FormAction } from '../FormAction'
-import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+import { updateRawArray } from './util/updateRawArray'
 
 export function arrayInsertReducer<T extends z.ZodTypeAny>(
   reducer: Reducer<FormState<T>, FormAction<T>>,
@@ -11,9 +11,12 @@ export function arrayInsertReducer<T extends z.ZodTypeAny>(
   action: ArrayInsertAction
 ) {
   const { field, index, value } = action
-  const inverseSchema = getInverseArrayElementSchema(field.schema)
-  return reducer(
-    state,
-    arrayInsertRaw(field, index, inverseSchema.parse(value))
+  return updateRawArray(reducer, state, field, (array) =>
+    insert(array ?? [], index, value)
   )
 }
+
+function insert<T>(array: T[], index: number, parsedValue: T) {
+  if (index < 0 || index > array.length) throw new Error(`index out of range`)
+  return [...array.slice(0, index), parsedValue, ...array.slice(index)]
+}

package/src/reducers/arrayInsertParsed.ts

@@ -0,0 +1,19 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { arrayInsert, ArrayInsertParsedAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+
+export function arrayInsertParsedReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayInsertParsedAction
+) {
+  const { field, index, parsedValue } = action
+  const inverseSchema = getInverseArrayElementSchema(field.schema)
+  return reducer(
+    state,
+    arrayInsert(field, index, inverseSchema.parse(parsedValue))
+  )
+}

package/src/reducers/arrayPush.ts

@@ -3,8 +3,7 @@ import { FormState } from '../FormState'
 import { ArrayPushAction } from '../actions/arrayActions'
 import { Reducer } from 'redux'
 import { FormAction } from '../FormAction'
-import { setValue } from '../actions/setValue'
-import { get } from '../util/get'
+import { updateRawArray } from './util/updateRawArray'
 
 export function arrayPushReducer<T extends z.ZodTypeAny>(
   reducer: Reducer<FormState<T>, FormAction<T>>,
@@ -12,9 +11,8 @@ export function arrayPushReducer<T extends z.ZodTypeAny>(
   action: ArrayPushAction
 ) {
   const { field, value } = action
-  const array = get(state.rawValues, field.path)
-  return reducer(
-    state,
-    setValue(field.get([Array.isArray(array) ? array.length : 0]), value)
-  )
+  return updateRawArray(reducer, state, field, (array) => [
+    ...(array ?? []),
+    value,
+  ])
 }