Formik: Managing form state with Mobx

[adavia]

Question

Im trying to manage the state of my forms using mobx. So far im only overriting the handleChange event of my input so i can use an observable instead of local state.
@observable form = { user: { email: '', password: '' } };

 handleChange = (e) => {
    const { name, value } = e.target;
    const { user } = this.props.auth.form;
    user[name] = value;
 }

render() {
  const { user } = this.props.auth.form;

return (
  <Wrapper>
    <h1>Sign In to the app</h1>
    <Formik
      initialValues={{
        email: user.email, 
        password: user.password
      }}
      onSubmit={ async (values,{ setSubmitting, setStatus }) => {
        const response = await this.props.auth.signin(values);

        if (response.status !== 200) {
          setStatus(response);
          setSubmitting(false);
        } else {
          setSubmitting(false);
          this.props.history.push('/');
        }
      }}
      render={({
        values,
        isSubmitting,
        dirty,
        status
      }) => (
        <Form>
          <InputWrapper>
            <Field 
              value={user.email}
              name="email"
              onChange={this.handleChange}
              onBlur={this.handleBlur}
              component={InputField}
              placeholder="Email" 
            />
          </InputWrapper>
          <InputWrapper>
            <Field 
              value={user.password}
              name="password"
              type="password"
              onChange={this.handleChange}
              onBlur={this.handleBlur}
              component={InputField}
              placeholder="Password" 
            />
          </InputWrapper>
          {status && <Alert type={status.status} message={status.data.message} />}
          <Button disabled={isSubmitting || !dirty}>
            {isSubmitting && 
              <i className="fa fa-circle-o-notch fa-spin"></i>} Sign In
          </Button>
        </Form>
      )}
    />
  </Wrapper>
);
}

Current Behavior

!dirty is always false which means values are always equal from initial values.

Desired Behavior

!dirty should turn to true
## Suggested Solutions
-

Info

Should i also overrite the onBlur event to fix this?

• Formik Version: "^0.11.5"
• OS: macOS High Sierra
• Node Version: v8.1.1
• Package Manager and version:nvm 0.32.1

[jaredpalmer]

Formik handles form state _for you_. It is thus an "uncontrolled" component. This is by design, as form state is always local. You should instead only update your mobx store once the form has been submitted (in handleSubmit) through a mobx action.

[adavia]

Thanks for the response back Jared. I clearly understand that, however lets say i want to keep the state of my form if i accidentally unmount the component and re-mount it back again?

[jaredpalmer]

You can use formik-persist for this.

[gastonmorixe]

@jaredpalmer I don't want to open another issue with the same title but I believe there's room for Mobx to be used in Formik as state management instead of native react state.

I love Formik API but there are things we can not do without observables and Mobx. Specially computed properties.

I have created a small example of a Formik like from scratch but using Mobx as state. It's a product cart where you see a table with a computed prop on the right for each row and on the bottom for the total. It's a pleasure to work with mobx on complex cases like this with real time computations and feedback. What's great about Mobx also is that it's very performant.

I am not staying formik should use Mobx but suggesting the idea that state management should be React independent and we could plugin / choose either default React state, mobx or others.

I encourage you to see it full-screen with react dev-tools to see the re-renders highlight.

Live demo: https://49dsy.csb.app/
Code: https://codesandbox.io/s/formik-mobx-by-me-49dsy