Formik: [Next] <Debug/> component

[jaredpalmer]

Now that Formik uses context, a <Debug/> component is now possible.

Proof of concept: https://codesandbox.io/s/mrz25m138

• Logs history
• Can jump to states

Thoughts?

[jaredpalmer]

Worth examining perf implications... but we could get _awesome_ debugging if we refactored internals to use a reducer pattern.

```tsx
reduce = (
state: FormikState,
{ type, payload }: { type: string; payload: any }
) => {
switch (type) {
case 'SET_ERRORS':
return { ...state, errors: payload };
case 'SET_STATUS':
return { ...state, status: payload };
case 'SET_TOUCHED':
return { ...state, touched: payload };
case 'SET_VALUES':
return { ...state, values: payload };
case 'SET_FIELD_VALUE':
return { ...state, values: { ...state.values, ...payload } };
case 'SET_FIELD_ERROR':
return { ...state, errors: { ...state.errors, ...payload } };
case 'SET_FIELD_TOUCHED':
return { ...state, touched: { ...state.touched, ...payload } };
case 'SET_SUBMITTING':
return { ...state, isSubmitting: payload };
default:
return state;
}
};

dispatch = (action: { type: string; payload: any }) => {
this.setState((state: FormikState) => this.reduce(state, action));
};```

[Andreyco]

Oh, this is great. Hope to elaborate on this as soon as my time schedule allows me to.

[jaredpalmer]

Closing this for now. I think array handling needs the most love right now

[anied]

I know this is a three year old closed issue, but I'd love some debugging helpers built into the library-- I'm running into an issue where an error is being mysteriously unset and I am finding it very challenging to track where and why it is happening.

[alexanderankin]

just found this library and heard of this, i think in a presentation? definitely was impressed by it.