React uygulamasında hizmet sahibi olmak

Bir hizmete / fabrikaya mantık çıkarabildiğim ve kontrolörlerimde kullanabileceğim açısal dünyadan geliyorum.

Bir React uygulamasında aynı şeyi nasıl başarabileceğimi anlamaya çalışıyorum.

Diyelim ki kullanıcının şifre girişini doğrulayan bir bileşenim var (gücü). Bu mantık oldukça karmaşık, bu yüzden onu kendi bileşenine yazmak istemiyorum.

Bu mantığı nereye yazmalıyım? Bir mağazada fluks kullanıyorsam? Yoksa daha iyi bir seçenek var mı?

İlk cevap mevcut Container vs Presenter paradigmasını yansıtmıyor .

Bir şifreyi doğrulamak gibi bir şey yapmanız gerekiyorsa, büyük olasılıkla bunu yapan bir işleviniz olacaktır. Bu işlevi bir destek olarak yeniden kullanılabilir görünümünüze geçiriyor olacaksınız.

kaplar

Bu nedenle, bunu yapmanın doğru yolu, bir özellik olarak işlev görecek bir ValidatorContainer yazmak ve formu, alttan sağ destekleri geçirerek içine sarmaktır. Görünümünüz söz konusu olduğunda, validator konteyneriniz görünümünüzü sarar ve görünüm konteynır mantığını tüketir.

Doğrulamanın tümü kabın özelliklerinde yapılabilir, ancak 3. taraf bir doğrulayıcı ya da herhangi bir basit doğrulama hizmeti kullanıyorsanız, hizmeti kapsayıcı bileşeninin bir özelliği olarak kullanabilir ve kabın yöntemlerinde kullanabilirsiniz. Bunu dinlendirici bileşenler için yaptım ve çok iyi çalışıyor.

Sağlayıcıları

Biraz daha fazla yapılandırma gerekiyorsa, bir Sağlayıcı / Tüketici modeli kullanabilirsiniz. Sağlayıcı, üst uygulama nesnesine (taktığınız) yakın ve onun altında bir yere saran ve kendisinin bir bölümünü veya üst katmanda yapılandırılmış bir özelliği içerik API'sine sağlayan yüksek düzeyli bir bileşendir. Daha sonra konteynır elemanlarımı içeriği tüketecek şekilde ayarladım.

Ebeveyn / çocuk bağlam ilişkilerinin birbirine yakın olması gerekmez, sadece çocuğun bir şekilde soyulması gerekir. Redux depoları ve React Router bu şekilde çalışır. Geri kalan kaplarıma kök dinlendirici bir bağlam sağlamak için kullandım (eğer kendiminkini sağlamazsam).

(not: bağlam API'si dokümanlar üzerinde deneysel olarak işaretlenmiştir, ancak ne kullandığını düşünerek artık daha fazla olduğunu düşünmüyorum).

//An example of a Provider component, takes a preconfigured restful.js
//object and makes it available anywhere in the application
export default class RestfulProvider extends React.Component {
	constructor(props){
		super(props);

		if(!("restful" in props)){
			throw Error("Restful service must be provided");
		}
	}

	getChildContext(){
		return {
			api: this.props.restful
		};
	}

	render() {
		return this.props.children;
	}
}

RestfulProvider.childContextTypes = {
	api: React.PropTypes.object
};

Ara Katman

Denemediğim, ama kullanıldığımı gördüğüm başka bir yol, ara yazılımları Redux ile birlikte kullanmaktır. Hizmet nesnenizi uygulamanın dışında veya en azından redux deposundan daha yüksek olarak tanımlarsınız. Mağaza oluşturma sırasında, hizmeti ara katman yazılımına enjekte edersiniz ve ara katman yazılımı, hizmeti etkileyen tüm işlemleri gerçekleştirir.

Bu şekilde, restful.js nesnesimi ara katman yazılımına enjekte edebilir ve konteyner yöntemlerimi bağımsız eylemlerle değiştirebilirim. Hala form görünümü katmanına eylemleri sağlamak için bir kapsayıcı bileşen gerekir, ancak connect () ve mapDispatchToProps beni orada kaplıdır.

Yeni v4 tepki yönlendirici-redux, örneğin tarihin durumunu etkilemek için bu yöntemi kullanır.

//Example middleware from react-router-redux
//History is our service here and actions change it.

import { CALL_HISTORY_METHOD } from './actions'

/**
 * This middleware captures CALL_HISTORY_METHOD actions to redirect to the
 * provided history object. This will prevent these actions from reaching your
 * reducer or any middleware that comes after this one.
 */
export default function routerMiddleware(history) {
  return () => next => action => {
    if (action.type !== CALL_HISTORY_METHOD) {
      return next(action)
    }

    const { payload: { method, args } } = action
    history[method](...args)
  }
}

Bir Açısal hizmetin yalnızca bağlamdan bağımsız yöntemler sunan bir nesne olduğunu fark ettiğinizde sorun son derece basitleşir. Daha karmaşık görünmesini sağlayan sadece Açısal DI mekanizması. DI, sizin için örnekler oluşturmaya ve sürdürmeye özen gösterdiğinden faydalıdır, ancak gerçekten buna ihtiyacınız yoktur.

Axios adlı (muhtemelen duymuş olduğunuz) popüler bir AJAX kütüphanesini düşünün:

import axios from "axios";
axios.post(...);

Hizmet gibi davranmıyor mu? Belirli bir mantıktan sorumlu bir dizi yöntem sağlar ve ana koddan bağımsızdır.

Örnek durumunuz, girişlerinizi doğrulamak için yalıtılmış bir yöntem kümesi oluşturmakla ilgiliydi (örn. Şifre gücünü kontrol etmek). Bazıları bu yöntemleri benim için açıkça bir anti-desen olan bileşenlerin içine koymayı önerdi. Doğrulama XHR arka uç çağrıları yapmayı ve işlemeyi veya karmaşık hesaplamalar yapmayı içeriyorsa ne olur? Bu mantığı fare tıklama işleyicileri ve kullanıcı arayüzüne özgü diğer öğelerle karıştırır mısınız? Saçmalık. Konteyner / HOC yaklaşımı için de aynı şey geçerlidir. Bileşeninizi yalnızca değerin içinde bir basamak olup olmadığını kontrol edecek bir yöntem eklemek için mi sarmak istiyorsunuz? Haydi.

Sadece 'ValidationService.js' adında yeni bir dosya oluşturur ve aşağıdaki gibi düzenlerim:

const ValidationService = {
    firstValidationMethod: function(value) {
        //inspect the value
    },

    secondValidationMethod: function(value) {
        //inspect the value
    }
};

export default ValidationService;

Sonra bileşeninizde:

import ValidationService from "./services/ValidationService.js";

...

//inside the component
yourInputChangeHandler(event) {

    if(!ValidationService.firstValidationMethod(event.target.value) {
        //show a validation warning
        return false;
    }
    //proceed
}

Bu hizmeti istediğiniz yerden kullanın. Doğrulama kuralları değişirse, yalnızca ValidationService.js dosyasına odaklanmanız gerekir.

Diğer hizmetlere bağlı olarak daha karmaşık bir hizmete ihtiyacınız olabilir. Bu durumda, hizmet dosyanız statik bir nesne yerine bir sınıf yapıcısı döndürebilir, böylece bileşenin kendisinde nesnenin bir örneğini oluşturabilirsiniz. Ayrıca, uygulamanın tamamında her zaman kullanılan hizmet nesnesinin yalnızca bir örneğinin bulunduğundan emin olmak için basit bir singleton uygulamayı düşünebilirsiniz.

Birden çok bileşen arasında paylaşılacak bazı biçimlendirme mantığına ihtiyacım vardı ve Açısal bir geliştirici de doğal olarak bir hizmete yöneldi.

Mantığı ayrı bir dosyaya koyarak paylaştım

function format(input) {
    //convert input to output
    return output;
}

module.exports = {
    format: format
};

ve daha sonra modül olarak içe aktardı

import formatter from '../services/formatter.service';

//then in component

    render() {

        return formatter.format(this.props.data);
    }

React'ın amacının, mantıksal olarak birleştirilmesi gereken şeyleri daha iyi birleştirmek olduğunu unutmayın. Karmaşık bir "şifreyi doğrula" yöntemi tasarlıyorsanız, bu yöntem nereye birleştirilmelidir?

Kullanıcının her yeni şifre girmesi gerektiğinde kullanmanız gerekecek. Bu kayıt ekranında, "şifremi unuttum" ekranında, yönetici "başka bir kullanıcı için şifreyi sıfırla" ekranında vb. Olabilir.

Ancak bu durumlardan herhangi birinde, her zaman bazı metin giriş alanlarına bağlı olacaktır. İşte bu noktada birleştirilmeli.

Yalnızca bir giriş alanı ve ilgili doğrulama mantığından oluşan çok küçük bir React bileşeni oluşturun. Bu bileşeni, şifre girişi olmasını isteyebilecek tüm formların içine girin.

Temelde mantık için bir hizmete / fabrikaya sahip olmakla aynı sonuçtur, ancak doğrudan girişe bağlarsınız. Bu nedenle, kalıcı olarak birbirine bağlı olduğundan, artık bu işleve doğrulama girdisini nerede arayacağınızı söylemenize gerek yoktur.

Ayrıca Angular.js bölgesinden geldim ve React.js'deki hizmetler ve fabrikalar daha basit.

Benim gibi düz fonksiyonlar veya sınıflar, geri arama stili ve olay Mobx kullanabilirsiniz :)

// Here we have Service class > dont forget that in JS class is Function
class HttpService {
  constructor() {
    this.data = "Hello data from HttpService";
    this.getData = this.getData.bind(this);
  }

  getData() {
    return this.data;
  }
}


// Making Instance of class > it's object now
const http = new HttpService();


// Here is React Class extended By React
class ReactApp extends React.Component {
  state = {
    data: ""
  };

  componentDidMount() {
    const data = http.getData();

    this.setState({
      data: data
    });
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

ReactDOM.render(<ReactApp />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

</body>
</html>

İşte basit bir örnek:

Aynı durum: Birden çok Açısal proje yaptık ve Tepki'ye geçtikten sonra, DI yoluyla hizmet vermenin basit bir yoluna sahip olmak eksik bir parça gibi görünüyor (hizmetin bir kenara).

Bağlam ve ES7 dekoratörleri kullanarak yaklaşabiliriz:

https://jaysoo.ca/2015/06/09/react-contexts-and-dependency-injection/

Bu adamlar bunu bir adım daha ileri götürdüler / farklı bir yönde:

http://blog.wolksoftware.com/dependency-injection-in-react-powered-inversifyjs

Hala tahıllara karşı çalışmak gibi. Bu cevabı büyük bir React projesi üstlendikten 6 ay sonra tekrar ziyaret edecektir.

EDIT: 6 ay sonra biraz daha React deneyim. Mantığın doğasını düşünün:

1. Kullanıcı arayüzüne (yalnızca) bağlı mı? Bir bileşene taşıyın (kabul edilen cevap).
2. (Sadece) devlet yönetimine mi bağlı? Bir gövdeye taşı .
3. Her ikisine de bağlı mı? Ayrı bir dosyaya taşıyın, bir seçici aracılığıyla bileşenlerde ve gövdelerde tüketin .

Bazıları yeniden kullanım için HOC'lara da ulaşır, ancak benim için yukarıdaki neredeyse tüm kullanım durumlarını kapsar. Ayrıca, endişeleri ayrı tutmak ve kullanıcı arayüzünü belirtmek için devlet yönetimini ördekler kullanarak ölçeklendirmeyi düşünün .

Ben de açısal değilim ve React deniyorum, şu andan itibaren, önerilen bir (?) Yolu Yüksek Sipariş Bileşenleri kullanıyor gibi görünüyor :

Üst düzey bir bileşen (HOC), React'te bileşen mantığını yeniden kullanmak için gelişmiş bir tekniktir. HOC'ler, React API'sinin bir parçası değildir. Onlar React'in bileşimsel doğasından doğan bir modeldir.

Aynı doğrulama mantığına sahip olduğunuzu inputve textareauygulamak istediğinizi varsayalım :

const Input = (props) => (
  <input type="text"
    style={props.style}
    onChange={props.onChange} />
)
const TextArea = (props) => (
  <textarea rows="3"
    style={props.style}
    onChange={props.onChange} >
  </textarea>
)

Ardından, sarılmış bileşeni doğrulayan ve stil uygulayan bir HOC yazın:

function withValidator(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props)

      this.validateAndStyle = this.validateAndStyle.bind(this)
      this.state = {
        style: {}
      }
    }

    validateAndStyle(e) {
      const value = e.target.value
      const valid = value && value.length > 3 // shared logic here
      const style = valid ? {} : { border: '2px solid red' }
      console.log(value, valid)
      this.setState({
        style: style
      })
    }

    render() {
      return <WrappedComponent
        onChange={this.validateAndStyle}
        style={this.state.style}
        {...this.props} />
    }
  }
}

Şimdi bu HOC'ler aynı doğrulama davranışını paylaşıyor:

const InputWithValidator = withValidator(Input)
const TextAreaWithValidator = withValidator(TextArea)

render((
  <div>
    <InputWithValidator />
    <TextAreaWithValidator />
  </div>
), document.getElementById('root'));

Basit bir demo hazırladım .

Düzenleme : Başka bir demoHOC s gibi birden çok doğrulama işlevlerinden oluşan mantığı paylaşabilmeniz için bir dizi işlev geçmek için sahne kullanmaktır :

<InputWithValidator validators={[validator1,validator2]} />
<TextAreaWithValidator validators={[validator1,validator2]} />

Edit2 : React 16.8+ yeni bir özellik, Hook , mantığı paylaşmak için başka bir güzel yol sağlar.

const Input = (props) => {
  const inputValidation = useInputValidation()

  return (
    <input type="text"
    {...inputValidation} />
  )
}

function useInputValidation() {
  const [value, setValue] = useState('')
  const [style, setStyle] = useState({})

  function handleChange(e) {
    const value = e.target.value
    setValue(value)
    const valid = value && value.length > 3 // shared logic here
    const style = valid ? {} : { border: '2px solid red' }
    console.log(value, valid)
    setStyle(style)
  }

  return {
    value,
    style,
    onChange: handleChange
  }
}

https://stackblitz.com/edit/react-shared-validation-logic-using-hook?file=index.js

Hizmet, Açısal2 + ' da bile Açısal ile sınırlı değildir ,

Hizmet sadece yardımcı fonksiyonların toplanmasıdır ...

Ve bunları oluşturmanın ve uygulama boyunca yeniden kullanmanın birçok yolu var ...

1) Hepsi bir js dosyasından ihraç edilen, aşağıdaki gibi ayrı bir fonksiyon olabilir:

export const firstFunction = () => {
   return "firstFunction";
}

export const secondFunction = () => {
   return "secondFunction";
}
//etc

2) Ayrıca fonksiyonların toplanması ile fabrika yöntemini de kullanabiliriz ... ES6 ile bir fonksiyon yapıcıdan ziyade bir sınıf olabilir:

class myService {

  constructor() {
    this._data = null;
  }

  setMyService(data) {
    this._data = data;
  }

  getMyService() {
    return this._data;
  }

}

Bu durumda yeni anahtarla bir örnek oluşturmanız gerekir ...

const myServiceInstance = new myService();

Ayrıca bu durumda, her örneğin kendi yaşamı vardır, bu yüzden paylaşmak istiyorsanız dikkatli olun, bu durumda yalnızca istediğiniz örneği dışa aktarmalısınız ...

3) İşleviniz ve araçlarınız paylaşılmayacaksa, bunları React bileşenine, bu durumda, reaksiyon bileşeninizdeki işlev gibi koyabilirsiniz ...

class Greeting extends React.Component {
  getName() {
    return "Alireza Dezfoolian";
  }

  render() {
    return <h1>Hello, {this.getName()}</h1>;
  }
}

4) Bir şeyleri ele almanın başka bir yolu, Redux kullanıyor olabilir , sizin için geçici bir mağazadır, bu nedenle React uygulamanızda varsa, birçok alıcı ayarlayıcı işlevinde size yardımcı olabilir size ... Büyük bir mağaza gibi eyaletlerinizi takip eden ve bileşenleriniz arasında paylaşabildiğiniz için, hizmetlerde kullandığımız alıcı ayarlayıcıları için birçok acıdan kurtulabilir ...

DRY kodu yapmak her zaman iyidir ve kodu yeniden kullanılabilir ve okunabilir hale getirmek için ne gerektiğini tekrarlamamaktadır, ancak Reaux uygulamasındaki Açısal yolları izlemeye çalışmayın , madde 4'te belirtildiği gibi, Redux kullanmak ihtiyacınızı azaltabilir hizmetleri ve bunları madde 1 gibi yeniden kullanılabilir yardımcı işlevler için kullanmayı sınırlarsınız ...

Senin gibi aynı bottayım. Bahsettiğiniz durumda, girdi doğrulama kullanıcı arabirimi bileşenini bir React bileşeni olarak uygularım.

Doğrulama mantığının uygulanmasının birleştirilmemesi gerektiğine katılıyorum. Bu yüzden ayrı bir JS modülüne koyacağım.

Yani, birleştirilmemesi gereken mantık için ayrı bir dosyada bir JS modülü / sınıfı kullanın ve bileşeni "hizmet" ten ayırmak için requir / import kullanın.

Bu, bağımlılık enjeksiyonuna ve bağımsız olarak ünite testine izin verir.

ya da "http" sınıf mirasını React Bileşenine enjekte edebilirsiniz

sahne nesnesi üzerinden.

1. Güncelleme :

   ReactDOM.render(<ReactApp data={app} />, document.getElementById('root'));

2. React Component ReactApp'ı bu şekilde düzenleyin:

   class ReactApp extends React.Component {
   
   state = {
   
       data: ''
   
   }
   
       render(){
   
       return (
           <div>
           {this.props.data.getData()}      
           </div>
   
       )
       }
   }

Karşılaştığım yeniden kullanılabilir mantık için en çok kullanılan desen ya bir kanca yazmak ya da bir utils dosyası oluşturmaktır. Neyi başarmak istediğinize bağlıdır.

hooks/useForm.js

Form verilerini doğrulamak istiyorsanız, useForm.js adlı özel bir kanca oluşturur ve form verilerini sağlar ve karşılığında bana iki şey içeren bir nesne döndürür:

Object: {
    value,
    error,
}

İlerledikçe kesinlikle daha fazla şey iade edebilirsiniz.

utils/URL.js

Başka bir örnek, bir URL'den bazı bilgileri ayıklamak istediğiniz gibi bir işlev içeren bir utils dosyası oluşturur ve gerektiğinde içe aktarır gibi olurdu:

 export function getURLParam(p) {
...
}