React redux oop classes

问题:

coming from angular i used to have a class for every entity in my DB, such class encapsulated all entity behaviour.

for example users Class can look like

export class User{
  static notValid(u){
    return !!((u.id && u.id > 0 && u.fullname && u.fullname.length > 2 && u.picture) === false);
  }
  static fromArray(arr){
    let pack = [];
    for(let i=0;i<arr.length;i++){
      pack.push(new User(arr[i]));
    }
    return pack;
  }
  constructor(u){
    this.id = u.id || 0;
    this.fullname = u.fullname+'' || 'N/A';
    this.picture = u.picture+'' || '/imgs/logo.png';
    this.role = u.role || 'N/A';
    this.username = u.username+'' || '';
    this.email = u.email+'' || '';
    this.dob = u.dob || 0;
    this.gender = u.gender+'' || '';

    ///START SETTING FLAGS AND VALIDATING DATA;
    this.isValid = !User.notValid(this);
    this.saved   = this.id > 0;
    let n = this.fullname;
    this.nickname = n.split(' ').shift()+' '+n.split(' ').pop();
  }
  save(){
  ///IF NO ID, POST TO SERVER
    if(!this.saved)return $http.post('/user',this.toJson);
    return $http.put('user/'+this.id,this.toJson());
  //tojson is defined in prototype;
  }
  identity(){
    return {id:this.id,fullname:this.fullname,picture:this.picture,nickname:this.nickname};
  }
}

}

so that my controller doenot know about how to save or update User, all it have is to trigger save() on user object.

Now React world, where every thing inside app is a component;

1. how can i replicate such approach inside react component ?

i read alot that there is presentational components and smart components. but what about Data Model component ?

2. if i port all my current class's to react should i also implement render method ? can i have multiple render functions to return different html based on page.

example above User can appear inside Profile will all details, and as a card in users list, so i should keep html for both inside class prototype ?

回答1:

You seem to be a bit confused about React and what it is designed to do which is perfectly normal, coming from the Angular world.

The thing is, as far as React is concerned there is no such thing as a data model, only components. These components can have state (or they may not) and these components are rendered to the DOM.

Various types of components seem to have confused you as well. React is only concerned with how data is presented. Presentation and container components are distinguished from each other to make it easier for us to reason about how to manage application state.

To answer your specific questions:

1) If you are really adamant about keeping your existing structure and make it work with React, you don't actually need to do a lot of work. Your data model components are just JavaScript objects. You can pass them around and you can give them to components. When some event happens in the components, you can call the relevant methods in your objects. You will need to make sure that Angular specific methods are ported to pure JavaScript though.

I advise against this approach. It will work at first but you will find yourself in a maintenance hell in no time. Believe me, I'm building large scale React apps in my job and I have been bitten by similar decisions when I first started writing React components.

2) Certainly you could add a couple of React methods to your class definitions and also throw in the presentation code (that is, HTML) and presentation state. Then you would be able to render these components.

But that really is not the way to go about it. React doesn't decide on anything for you whereas Angular is very opinionated about this. First and foremost you should follow some tutorials on React. Looks like you have a sizable application in your hands, so I would advise you to look into Flux and Redux as well.

After that you should sit down and design how your application should work and how your state should look. After that it will be a breeze to go through the actual coding part.

You can NOT have multiple render methods in a React component, that makes absolutely no sense. React is pure JavaScript and JavaScript doesn't have any concept of overriding class members in the sense of classical OOP. Heck, JavaScript doesn't even have the concept of a class, that has been included in ES6 so people coming from class oriented programming languages wouldn't need to properly learn how the prototype chain works.

React components, and JavaScript objects in general, can only have one key. You can try this in your browser's console.

let a = {b: 1, b: 2};
console.log(a);

The object a will only have one b key and the value for that key will be 2.

Having said all this, you can delegate the actual rendering of a component to other objects based on some conditions using normal JavaScript coding methods. But this isn't how React is supposed to work. Your render method can be able to decide on what to render based on your conditions.

回答2:

First of all, let me tell you that I can't answer your question.

It looks like you're new to React. I've never used this approach to create a class for every entity in DB, in React, ever. It's new to me. Maybe it works, maybe it doesn't. But what I'd suggest you is to get your hands dirty first with example projects in react. That'll answer most of your questions.

However, I can answer some of your questions-

Data Model component ?

Obviously, there is no such thing as Data Model component. React is all about unidirectional data flow. You want to use redux for state management in react. The components which are connected to this state are connected/smart components. Smart components pass the state to presentational/dumb components via props (properties). So there is that. All of the state comes from Redux or similar state management mechanism viz. Flux.

can i have multiple render functions to return different html based on page.

No. One component contains only one render() method. That is precisely why I suggest you to please build some example apps in React.

If you want to learn React, here's what I'd recommend you, in that particular order-

• React.js
• Redux
• Redux-thunk
• Redux-saga

React is not a monolithic framework like Angular. It's just a library. And programmers are meant to throw different libraries together to build their apps.