React redux oop classes

Question

Начиная с углового я использовал класс для каждого объекта в моей БД, такой класс инкапсулировал все поведение сущности.

, например, пользователи класса могут выглядеть

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}; 
    } 
} 

} 

так, что мой контроллер doenot знать о том, как сохранить или обновить пользователя, все это есть, чтобы вызвать сохранить() на объекте пользователя.

Теперь мир реактивов, где каждая вещь внутри приложения является компонентом;

1. Как я могу воспроизвести такой подход внутри компонента реакции?

Я читаю, что есть компоненты и интеллектуальные компоненты. но что насчет Data Model component?

2. Если я переношу весь мой текущий класс на реакцию, должен ли я также реализовать метод визуализации? могу ли я иметь несколько функций рендеринга для возврата разных html на странице.

пример выше Пользователь может появиться внутри профиля, все детали и в виде карты в списке пользователей, поэтому я должен хранить html для прототипа внутри класса?

Answer 1

Вы, кажется, немного смущены реакцией и тем, что она предназначена для того, чтобы делать это нормально, исходя из углового мира.

Дело в том, что касается Реагирования, нет такой вещи, как модель данных, только компоненты. Эти компоненты могут иметь состояние (или не могут), и эти компоненты отображаются в DOM.

Различные типы компонентов, похоже, вас тоже смутили. Реагирование касается только того, как представлены данные. Компоненты презентации и контейнера отличаются друг от друга, чтобы облегчить нам рассуждать о том, как управлять состоянием приложения.

Чтобы ответить на конкретные вопросы:

1) Если вы действительно непреклонны о сохранении существующей структуры и заставить его работать с React, вы на самом деле не нужно делать много работы. Компоненты модели данных - это только объекты JavaScript. Вы можете передать их, и вы можете предоставить их компонентам. Когда в компонентах происходит какое-либо событие, вы можете вызвать соответствующие методы в своих объектах. Вам нужно будет убедиться, что специальные методы Angular переносятся на чистый JavaScript.

Советую против этого подхода. Сначала это сработает, но вы окажетесь в адском состоянии в мгновение ока. Поверьте мне, я занимаюсь разработкой приложений с большим масштабом в своей работе, и я был укушен подобными решениями, когда я впервые начал писать компоненты React.

2) Конечно, вы можете добавить несколько методов React к определениям классов, а также ввести код презентации (то есть HTML) и состояние презентации. Затем вы сможете отображать эти компоненты.

Но это действительно не так. Реакт не принимает ничего для вас, в то время как Angular очень упрям. Прежде всего, вы должны следовать некоторым учебным пособиям по React. Похоже, у вас в руках значительное приложение, поэтому я бы посоветовал вам взглянуть на Flux и Redux.

После этого вы должны сесть и разработать, как ваше приложение должно работать и как должно выглядеть ваше государство. После этого будет ветерок пройти через действительную часть кодирования.

У вас не может быть несколько методов визуализации в компоненте React, что совершенно не имеет смысла. Реакция - это чистый JavaScript, и JavaScript не имеет понятия о переопределении членов класса в смысле классического ООП. Хек, у JavaScript нет даже понятия класса, который был включен в ES6, поэтому людям, идущим из классов, ориентированных на языки программирования, не нужно было бы правильно изучать, как работает цепочка прототипов.

Реагирующие компоненты и объекты JavaScript в целом могут иметь только один ключ. Вы можете попробовать это в консоли своего браузера.

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

Объект a будет иметь только один b ключ и значение этого ключа будет 2.

Сказав все это, вы можете делегировать фактический рендеринг компонента другим объектам на основе некоторых условий, используя обычные методы кодирования JavaScript. Но это не так, как должен работать React. Ваш метод визуализации может принять решение о том, что делать на основе ваших условий.

Answer 2

Прежде всего, позвольте мне сказать вам, что я не могу ответить на ваш вопрос.

Похоже, вы новичок в реактиве. Я никогда не использовал этот подход для создания класса для каждого объекта в БД, в Реаге, когда-либо. Это ново для меня. Может быть, это работает, может быть, нет. Но то, что я предлагаю вам, это сначала замарать руки, а примерные проекты реагируют. Это ответит на большинство ваших вопросов.

Однако, я могу ответить на некоторые ваши вопросы-

компонент модели данных?

Очевидно, что нет такой детали, как компонент данных. Реагирование касается однонаправленного потока данных. Вы хотите использовать redux для управления состоянием в реагировании. Компоненты, подключенные к этому состоянию, являются подключенными/интеллектуальными компонентами. Интеллектуальные компоненты передают состояние презентационным/немым компонентам через props (свойства). Так и есть. Все государство происходит от Redux или аналогичного механизма управления государством, а именно. Flux.

Возможно, у меня есть несколько функций рендеринга, чтобы возвращать разные html на основе .

№ Один компонент содержит только один render() способ. Именно поэтому я предлагаю вам, пожалуйста, создать некоторые примеры приложений в React.

Если вы хотите узнать React, вот что я рекомендую вам, в этом конкретном ПОРЯДКА

• React.JS
• Redux
• Redux-санк
• Redux-сага

Реагировать не является монолитной структуры, как угловые. Это просто библиотека. И программисты должны собирать разные библиотеки для создания своих приложений.