Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should I define model classes?

React uses Flux architecture and it is said in https://reactjs.org/docs/thinking-in-react.html that React has two models - state and props. And there are some suggestions for model management in React https://reactjs.org/community/model-management.html - but all of this seems to some additional layers to enhance the Flux. The big questions to which I am seeking the answers are:

  • Should I define model classes in React? I.e. if I have Customer class notion, then I can: 1) define the attributes of Customer directly as the attributes of state/props 2) define the attributes of Customer as the attributes of state.customer/props.customer; 3) define some JavaScript template/class Customer separately and simply say, that state.customer/props.customer is of type Customer and don't repeat attributes in the state/props. I feel, that 3) is the right approach, isn't it?
  • If 3rd options (of the previous point) is the right approach, then how can I define the Customer template and how can I define that state.customer/props.customer is of this template? I could use those template in some serialization, some model validation tasks as well and I could use in ReactNative project as well.
like image 683
TomR Avatar asked Jun 16 '19 21:06

TomR


People also ask

How do you define a model class?

The model classes represents domain-specific data and business logic in the MVC application. It represents the shape of the data as public properties and business logic as methods. In the ASP.NET MVC Application, all the Model classes must be created in the Model folder.

What is the purpose of model class?

A model class is typically used to "model" the data in your application. For example you could write a Model class that mirrors a database table , or a JSON . You could use objects of these classes as vessels to send / receive data. As an example this tool allows you top generate model java classes for JSON .

Can model classes have methods?

A model should contain all logic related to the model (this is DSL) so, yes it can update itself each hour. and when u define auto properties, it's same as defining setters and getter, so of course you can add methods, and constructors as well.

What is the difference between class and models?

A Class diagram shows your classes and their relationships. An Object Model Diagram shows the interaction between objects at some point, during run time. A Class Diagram will show what the Objects in your system consist of (members) and what they are capable of doing (methods) mostly static.


Video Answer


1 Answers

The most basic way is shown in following snippet:

const Customer = ({ name, age }) => (
  <div>
    <p>Name: {name}</p>
    <p>Age: {age}</p>
  </div>
);

const App = () =>
  [{ name: "Bert", age: 22 }, { name: "Alfons", age: 45 }].map(
    ({ name, age }, i) => (
      <>
        <Customer key={i} name={name} age={age} />
        <hr />
      </>
    )
  );

Where you define these props depends on where you need them. If only one component needs the props, you define them in that components state. But often you need the props in several components, so you lift them in your hierarchy up. That often results in a very "smart" component (a component that has a large state).

If your app becomes large and confusing, I suggest you store your state externally. To do that, you can use react context. It allows you to inject props to components that need it, rather than passing it several layers down in your hierarchy.

If you don't want to write your own context, you may use state management solutions like redux or mobx. They use context too, but provide convenient functions to easily connect a component to your external state.

like image 198
Neskews Avatar answered Nov 09 '22 03:11

Neskews