[Next] <Debug/> component

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.

  reduce = (
    state: FormikState<any>,
    { 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<any>) => this.reduce(state, action));
  };```

[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.