CODEWITHSUNDEEP
reactjstypescriptmobx
DD DD
DD DD

Reputation: 1238

How to organize typescript with mobx at ReactJS

I made mobx store like below.
I declared types of action in store.js

import { action, observable } from 'mobx';

export class SignStore {
  @observable
  UserInformation: {
    email: '';
    password: '';
  };

  @action
  handleChange = (e: any): void => {
    this.UserInformation[e.target.id] = e.target.value;
  };
}

And I injected this store in a component.
I declared type of UserInformation here.
But 'const { SignStore } = this.props;' here,
SignStore says

Property 'SignStore' does not exist on type 'Readonly & Readonly<{ children?: ReactNode; }>'.

import * as React from 'react';
import { observer, inject } from 'mobx-react';

interface IUserInformation {
  email: string;
  password: string;
}

@inject('SignStore')
@observer
class SignUp extends React.Component<IUserInformation> {
  render() {
    const { SignStore } = this.props;

    return (
      <div className="container">
        <form className="white" onSubmit={}>
          <h5 className="grey-text text-darken-3">Sign Up</h5>
          <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id="email" onChange={SignStore.handleChange} />
          </div>
          <div className="input-field">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              id="password"
              onChange={SignStore.handleChange}
            />
          </div>

        </form>
      </div>
    );
  }
}

export default SignUp;

Could you recommend some advice in this case?

Upvotes: 2

Views: 1473

Answers (1)

xDreamCoding
xDreamCoding

Reputation: 1694

The main problem, beside others, is that this.props is of type IUserInformation which is { email: string; password: string; } you then try to destructure that with const { SignStore } = this.props; obviously props does not have a SignStore parameter. For that props would need to look like: { email: string; password: string; SignStore: any }.

I'm not really familiar with mobx, but it seems like you would need atleast an Interface of ISignStore:

interface ISignStore {
  UserInformation: IUserInformation;
  handleChange: (e: any) => void;
}

then use that for your component: 

class SignUp extends React.Component<ISignStore>

and use it like:

const SignStore = this.props;

Upvotes: 2

Related Questions