Memiliki layanan dalam aplikasi Bereaksi


177

Saya datang dari dunia sudut di mana saya dapat mengekstrak logika ke layanan / pabrik dan mengkonsumsinya dalam pengontrol saya.

Saya mencoba memahami bagaimana saya dapat mencapai hal yang sama dalam aplikasi Bereaksi.

Katakanlah saya memiliki komponen yang memvalidasi input kata sandi pengguna (kekuatannya). Logikanya cukup rumit sehingga saya tidak ingin menuliskannya di komponen itu sendiri.

Di mana saya harus menulis logika ini? Di toko jika saya menggunakan fluks? Atau ada opsi yang lebih baik?


Anda dapat menggunakan paket dan melihat bagaimana mereka melakukannya - npmjs.com/package/react-password-strength-meter
James111

11
Kekuatan kata sandi hanyalah sebuah contoh. Saya mencari praktik terbaik yang lebih umum
Dennis Nerush

Anda mungkin harus melakukannya di sisi server?
James111

2
Tidak. Hanya logika sisi klien yang tidak boleh langsung di komponen. Pemeriksa kekuatan kata sandi hanyalah sebuah contoh
Dennis Nerush

4
Jika Anda memiliki banyak fungsi seperti itu, Anda dapat menyimpannya dalam file pembantu dan hanya memerlukannya ke file komponen Anda untuk digunakan. Jika itu adalah fungsi tunggal yang relevan hanya untuk komponen itu mungkin harus hidup di sana tidak peduli kompleksitasnya.
Jesse Kernaghan

Jawaban:


61

Jawaban pertama tidak mencerminkan paradigma Container vs Presenter saat ini .

Jika Anda perlu melakukan sesuatu, seperti memvalidasi kata sandi, kemungkinan Anda memiliki fungsi yang melakukannya. Anda akan meneruskan fungsi itu ke tampilan yang dapat digunakan kembali sebagai penyangga.

Wadah

Jadi, cara yang benar untuk melakukannya adalah dengan menulis ValidatorContainer, yang akan memiliki fungsi itu sebagai properti, dan membungkus formulir di dalamnya, meneruskan alat peraga yang tepat kepada anak. Ketika datang ke tampilan Anda, wadah validator Anda membungkus tampilan Anda dan tampilan mengkonsumsi logika kontainer.

Validasi dapat dilakukan semua di properti penampung, tetapi jika Anda menggunakan validator pihak ketiga, atau layanan validasi sederhana apa pun, Anda dapat menggunakan layanan ini sebagai properti komponen kontainer dan menggunakannya dalam metode penampung. Saya telah melakukan ini untuk komponen yang tenang dan bekerja dengan sangat baik.

Penyedia

Jika ada sedikit konfigurasi yang diperlukan, Anda dapat menggunakan model Penyedia / Konsumen. Penyedia adalah komponen tingkat tinggi yang membungkus di suatu tempat dekat dan di bawah objek aplikasi teratas (yang Anda pasang) dan memasok bagian dari dirinya sendiri, atau properti yang dikonfigurasi di lapisan atas, ke konteks API. Saya kemudian mengatur elemen wadah saya untuk mengkonsumsi konteksnya.

Hubungan konteks orang tua / anak tidak harus dekat satu sama lain, hanya saja anak harus diturunkan dengan cara tertentu. Redux menyimpan dan Bereaksi fungsi Router dengan cara ini. Saya telah menggunakannya untuk memberikan konteks root restful untuk wadah istirahat saya (jika saya tidak menyediakan sendiri).

(catatan: API konteks ditandai eksperimental dalam dokumen, tapi saya rasa itu tidak lagi, mengingat apa yang menggunakannya).

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

Middleware

Cara lain yang belum saya coba, tetapi terlihat digunakan, adalah menggunakan middleware bersamaan dengan Redux. Anda menentukan objek layanan Anda di luar aplikasi, atau setidaknya, lebih tinggi dari toko redux. Selama pembuatan toko, Anda menyuntikkan layanan ke middleware dan middleware menangani tindakan apa pun yang memengaruhi layanan.

Dengan cara ini, saya bisa menyuntikkan objek restful.js saya ke middleware dan mengganti metode wadah saya dengan tindakan independen. Saya masih membutuhkan komponen kontainer untuk memberikan tindakan ke lapisan tampilan formulir, tetapi terhubung () dan mapDispatchToProps telah saya bahas di sana.

Misalnya, v4 react-router-redux menggunakan metode ini untuk memengaruhi keadaan sejarah, misalnya.

//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)
  }
}


jawaban yang bagus sobat, Anda menghentikan saya dari melakukan hal-hal bodoh 8) KUDOS !!
csomakk

apa gunanya contoh wadah?
sensei

Saya tidak menganjurkannya, tetapi jika Anda ingin pergi ke jalur locator layanan (mirip dengan Angular), Anda dapat menambahkan semacam penyedia "injector / container" yang Anda selesaikan dari layanan (setelah sebelumnya mendaftarkannya).
eddiewould

React hooks datang untuk menyelamatkan. Dengan Hooks Anda dapat menulis logika yang dapat digunakan kembali tanpa menulis kelas. reactjs.org/docs/…
Raja Malik

102

Masalahnya menjadi sangat sederhana ketika Anda menyadari bahwa layanan Angular hanyalah objek yang memberikan serangkaian metode konteks-independen. Hanya mekanisme DI Sudut yang membuatnya terlihat lebih rumit. DI berguna karena menangani pembuatan dan pemeliharaan instance untuk Anda, tetapi Anda tidak benar-benar membutuhkannya.

Pertimbangkan perpustakaan AJAX populer bernama axios (yang mungkin pernah Anda dengar):

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

Bukankah itu berperilaku sebagai layanan? Ini memberikan seperangkat metode yang bertanggung jawab untuk beberapa logika tertentu dan independen dari kode utama.

Contoh kasus Anda adalah tentang membuat seperangkat metode terisolasi untuk memvalidasi input Anda (misalnya memeriksa kekuatan kata sandi). Beberapa menyarankan untuk meletakkan metode ini di dalam komponen yang bagi saya jelas merupakan anti-pola. Bagaimana jika validasi melibatkan membuat dan memproses panggilan backend XHR atau melakukan perhitungan kompleks? Apakah Anda akan mencampur logika ini dengan penangan klik mouse dan hal-hal khusus UI lainnya? Omong kosong. Sama dengan pendekatan container / HOC. Membungkus komponen Anda hanya untuk menambahkan metode yang akan memeriksa apakah nilainya memiliki angka di dalamnya? Ayolah.

Saya hanya akan membuat file baru bernama say 'ValidationService.js' dan mengaturnya sebagai berikut:

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

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

export default ValidationService;

Kemudian di komponen Anda:

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

...

//inside the component
yourInputChangeHandler(event) {

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

Gunakan layanan ini dari mana saja Anda inginkan. Jika aturan validasi berubah, Anda harus fokus hanya pada file ValidationService.js.

Anda mungkin memerlukan layanan yang lebih rumit yang tergantung pada layanan lain. Dalam hal ini, file layanan Anda dapat mengembalikan konstruktor kelas alih-alih objek statis sehingga Anda dapat membuat instance objek sendiri di komponen. Anda juga dapat mempertimbangkan penerapan singleton sederhana untuk memastikan bahwa selalu ada hanya satu contoh objek layanan yang digunakan di seluruh aplikasi.


3
Ini adalah cara saya akan melakukannya juga. Saya cukup terkejut bahwa jawaban ini memiliki sedikit suara untuk itu, karena ini terasa seperti cara dengan paling tidak gesekan. Jika layanan Anda bergantung pada layanan lain, maka sekali lagi, itu akan mengimpor layanan lain melalui modul mereka. Selain itu, modul, menurut definisi, lajang, jadi sebenarnya tidak ada pekerjaan lebih lanjut yang diperlukan untuk "mengimplementasikannya sebagai singleton sederhana" - Anda mendapatkan perilaku itu gratis :)
Mickey Puri

6
+1 - Jawaban yang bagus jika Anda hanya menggunakan layanan yang menyediakan fungsi. Namun , layanan Angular adalah kelas yang didefinisikan sekali, sehingga menyediakan lebih banyak fitur daripada hanya memberikan fungsi. Anda dapat melakukan cache objek sebagai parameter kelas layanan, misalnya.
Nino Filiu

6
Ini harus menjadi jawaban nyata, dan bukan jawaban yang terlalu rumit di atas
user1807334

1
Ini adalah jawaban yang bagus, kecuali itu bukan "reaktif". DOM tidak akan memperbarui tentang perubahan variabel dalam layanan.
Defacto

9
Bagaimana dengan injeksi ketergantungan? Layanan tidak mungkin untuk mengejek dalam komponen Anda kecuali jika Anda menyuntikkannya entah bagaimana. Mungkin memiliki objek global "wadah" tingkat atas yang memiliki masing-masing layanan sebagai bidang akan berhasil. Kemudian dalam pengujian Anda, Anda bisa mengganti bidang kontainer dengan mengejek untuk layanan yang ingin Anda tiru.
menehune23

34

Saya membutuhkan beberapa logika format untuk dibagikan di beberapa komponen dan sebagai pengembang Angular juga secara alami condong ke layanan.

Saya membagikan logika dengan meletakkannya di file terpisah

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

module.exports = {
    format: format
};

dan kemudian mengimpornya sebagai modul

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

//then in component

    render() {

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

8
Ini adalah ide yang baik seperti yang bahkan disebutkan dalam dokumen Bereaksi: reactjs.org/docs/composition-vs-inheritance.html Jika Anda ingin menggunakan kembali fungsionalitas non-UI antar komponen, kami sarankan mengekstraknya ke dalam modul JavaScript terpisah. Komponen dapat mengimpornya dan menggunakan fungsi itu, objek, atau kelas, tanpa memperluasnya.
user3426603

Itu sebenarnya satu-satunya jawaban di sini yang masuk akal.
Artem Novikov

33

Perlu diingat bahwa tujuan Bereaksi adalah untuk pasangan yang lebih baik hal-hal yang secara logis harus digabungkan. Jika Anda merancang metode "validasi kata sandi" yang rumit, di mana harus ditambah?

Anda harus menggunakannya setiap kali pengguna perlu memasukkan kata sandi baru. Ini bisa di layar pendaftaran, layar "lupa kata sandi", administrator "setel ulang kata sandi untuk pengguna lain", dll.

Tetapi dalam kasus-kasus tersebut, itu akan selalu terikat pada beberapa bidang input teks. Jadi disitulah harus ditambah.

Buat komponen Bereaksi yang sangat kecil yang hanya terdiri dari bidang input dan logika validasi yang terkait. Masukkan komponen itu ke dalam semua formulir yang mungkin ingin memiliki input kata sandi.

Ini pada dasarnya hasil yang sama dengan memiliki layanan / pabrik untuk logika, tetapi Anda memasangkannya langsung ke input. Jadi, Anda sekarang tidak perlu memberi tahu fungsi itu di mana harus mencari input validasinya, karena ia terikat secara permanen.


11
Apa itu praktik buruk untuk logika pasangan dan UI. Untuk mengubah logika saya harus menyentuh komponen
Dennis Nerush

14
Bereaksi secara fundamental menantang asumsi yang Anda buat. Ini sangat kontras dengan arsitektur MVC tradisional. Video ini melakukan pekerjaan yang cukup baik untuk menjelaskan alasannya (bagian yang relevan dimulai sekitar 2 menit).
Jake Roby

8
Bagaimana jika logika validasi yang sama juga perlu diterapkan pada elemen area teks? Logikanya masih perlu diekstraksi menjadi file bersama. Saya tidak berpikir di luar kotak ada kesetaraan dari perpustakaan reaksi. Layanan Angular adalah injeksi, dan kerangka kerja Angular dibangun di atas pola desain injeksi ketergantungan, yang memungkinkan instance dependensi yang dikelola oleh Angular. Ketika suatu layanan disuntikkan, biasanya ada singleton dalam lingkup yang disediakan, untuk memiliki layanan yang sama dalam Bereaksi, sebuah lib DI pihak ke-3 perlu diperkenalkan ke aplikasi.
Downhillski

15
@gravityplanx Saya menikmati menggunakan Bereaksi. Ini bukan pola sudut, ini adalah pola desain perangkat lunak. Saya suka membuka pikiran sambil meminjam barang-barang yang saya suka dari bagian-bagian bagus lainnya.
Downhillski

1
Modul @MickeyPuri ES6 tidak sama dengan Dependency Injection.
Spock

12

Saya juga berasal dari daerah Angular.js dan layanan serta pabrik di React.js lebih sederhana.

Anda dapat menggunakan fungsi atau kelas sederhana, gaya panggilan balik dan acara Mobx seperti saya :)

// 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>

Ini adalah contoh sederhana:


React.js adalah perpustakaan UI untuk membuat dan mengatur komponen UI. Ketika datang ke layanan yang dapat membantu kami menambahkan fungsionalitas tambahan maka kita harus membuat koleksi fungsi, objek fungsional atau kelas. Saya menemukan kelas sangat berguna tetapi saya tahu saya bermain juga dengan gaya fungsional yang dapat juga digunakan untuk membuat pembantu untuk menambahkan fungsionalitas yang diuntungkan yang berada di luar lingkup Reac.js.
Juraj

Hanya menerapkan ini. Cara Anda membuatnya menjadi kelas, dan mengekspornya cukup elegan.
GavinBelson

10

Situasi yang sama: Setelah melakukan banyak proyek Sudut dan pindah ke React, tidak memiliki cara sederhana untuk menyediakan layanan melalui DI sepertinya adalah bagian yang hilang (rincian layanan samping).

Menggunakan dekorator konteks dan ES7 kita dapat mendekati:

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

Sepertinya orang-orang ini telah mengambil langkah maju / ke arah yang berbeda:

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

Masih terasa seperti bekerja melawan keinginan. Akan meninjau kembali jawaban ini dalam waktu 6 bulan setelah melakukan proyek Bereaksi besar.

EDIT: Kembali 6 bulan kemudian dengan beberapa pengalaman Bereaksi lagi. Pertimbangkan sifat logika:

  1. Apakah ini terkait (hanya) dengan UI? Pindahkan ke komponen (jawaban yang diterima).
  2. Apakah itu terkait (hanya) dengan manajemen negara? Pindahkan ke thunk .
  3. Terikat dengan keduanya? Pindah ke file yang terpisah, konsumsi dalam komponen melalui pemilih dan di thunks.

Beberapa juga meraih HOC untuk digunakan kembali tetapi bagi saya hal di atas mencakup hampir semua kasus penggunaan. Juga, pertimbangkan untuk menskalakan manajemen negara menggunakan bebek untuk menjaga agar perhatian tetap terpisah dan berpusat pada UI.


IMHO Saya pikir ada adalah cara sederhana untuk memberikan layanan melalui DI, dengan menggunakan sistem ES6 Modul
Mickey Puri

1
@MickeyPuri, modul ES6 DI tidak akan memasukkan sifat hirarkis dari Angular DI, yaitu. orang tua (dalam DOM) instantiating dan layanan utama yang disediakan untuk komponen anak. Imho ES6 modul DI membandingkan lebih dekat ke sistem DI backend seperti Ninject dan Structuremap, duduk terpisah, daripada didasarkan pada, hierarki komponen DOM. Tapi saya ingin mendengar pendapat Anda tentang itu.
corolla

6

Saya dari Angular juga dan mencoba Bereaksi, seperti yang sekarang, satu cara yang direkomendasikan (?) Tampaknya menggunakan Komponen Orde Tinggi :

Komponen tingkat tinggi (HOC) adalah teknik canggih dalam Bereaksi untuk menggunakan kembali komponen logika. HOC bukan bagian dari React API, per se. Mereka adalah pola yang muncul dari sifat komposisional React.

Katakanlah Anda memiliki inputdan textareadan ingin menerapkan logika validasi yang sama:

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>
)

Kemudian tulis HOC yang melakukan validasi dan komponen yang dibungkus gaya:

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

Sekarang HOC tersebut memiliki perilaku validasi yang sama:

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

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

Saya membuat demo sederhana .

Sunting : Demo lain menggunakan alat peraga untuk melewati array fungsi sehingga Anda dapat berbagi logika yang disusun oleh beberapa fungsi validasi di HOCs seperti:

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

Edit2 : Bereaksi 16.8+ menyediakan fitur baru, Hook , cara lain yang baik untuk logika saham.

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-share-validation-logic-using-hook?file=index.js


Terima kasih. Saya benar-benar belajar dari solusi ini. Bagaimana jika saya perlu memiliki lebih dari satu validator. Misalnya selain validator 3 huruf, bagaimana jika saya ingin memiliki validator lain yang memastikan tidak ada angka yang dimasukkan. Bisakah kita membuat validator?
Youssef Sherif

1
@YoussefSherif Anda dapat menyiapkan beberapa fungsi validasi dan meneruskannya sebagai alat bantu HOC, lihat edit saya untuk demo lain.
bob

jadi HOC pada dasarnya adalah komponen wadah?
sensei

Ya, dari React doc: "Perhatikan bahwa HOC tidak mengubah komponen input, juga tidak menggunakan pewarisan untuk menyalin perilakunya. Sebaliknya, HOC menyusun komponen asli dengan membungkusnya dalam komponen wadah. HOC adalah murni berfungsi tanpa efek samping. "
bob

1
Syaratnya adalah menyuntikkan logika, saya tidak mengerti mengapa kita perlu HOC untuk melakukan ini. Meskipun Anda dapat melakukannya dengan HOC, rasanya terlalu rumit. Pemahaman saya tentang HOC adalah ketika ada juga beberapa kondisi tambahan yang perlu ditambahkan dan dikelola, yaitu bukan logika murni (yang terjadi di sini).
Mickey Puri

4

Layanan tidak terbatas pada Angular, bahkan dalam Angular2 + ,

Layanan hanyalah kumpulan fungsi pembantu ...

Dan ada banyak cara untuk membuatnya dan menggunakannya kembali di aplikasi ...

1) Mereka dapat semua fungsi yang dipisahkan yang diekspor dari file js, mirip seperti di bawah ini:

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

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

2) Kita juga dapat menggunakan metode pabrik seperti, dengan koleksi fungsi ... dengan ES6 dapat berupa kelas daripada konstruktor fungsi:

class myService {

  constructor() {
    this._data = null;
  }

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

  getMyService() {
    return this._data;
  }

}

Dalam hal ini Anda perlu membuat instance dengan kunci baru ...

const myServiceInstance = new myService();

Juga dalam hal ini, setiap instance memiliki kehidupannya sendiri, jadi berhati-hatilah jika Anda ingin membagikannya, dalam hal ini Anda harus mengekspor hanya instance yang Anda inginkan ...

3) Jika fungsi dan utilitas Anda tidak akan dibagikan, Anda bahkan dapat meletakkannya dalam komponen Bereaksi, dalam hal ini, sama seperti fungsi dalam komponen reaksi Anda ...

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

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

4) Cara lain Anda dapat menangani hal-hal, bisa menggunakan Redux , ini adalah toko sementara untuk Anda, jadi jika Anda memilikinya dalam aplikasi Bereaksi Anda , itu dapat membantu Anda dengan banyak fungsi pengambil getter setter Anda gunakan ... Ini seperti toko besar yang melacak negara Anda dan dapat membagikannya di seluruh komponen Anda, sehingga dapat menghilangkan banyak rasa sakit untuk barang-barang pengambil pengambil yang kami gunakan dalam layanan ...

Itu selalu baik untuk melakukan kode KERING dan tidak mengulangi apa yang perlu digunakan untuk membuat kode dapat digunakan kembali dan dibaca, tetapi jangan mencoba untuk mengikuti cara Angular dalam aplikasi Bereaksi , sebagaimana disebutkan dalam item 4, menggunakan Redux dapat mengurangi kebutuhan Anda akan layanan dan Anda membatasi menggunakannya untuk beberapa fungsi pembantu yang dapat digunakan kembali seperti item 1 ...


Tentu, Anda dapat menemukannya di situs web pribadi saya yang merupakan tautan dari halaman profil saya ...
Alireza

"Jangan ikuti cara Angular dalam Bereaksi" .. ahem Angular mempromosikan penggunaan Redux dan mengalirkan toko ke komponen presentasi menggunakan Observables dan manajemen negara seperti Redux seperti RxJS / Store. .. maksudmu AngularJS? Karena itu hal lain
Spock

1

Saya di boot yang sama seperti Anda. Dalam kasus yang Anda sebutkan, saya akan menerapkan komponen UI validasi input sebagai komponen Bereaksi.

Saya setuju implementasi logika validasi itu sendiri tidak boleh digabungkan. Karena itu saya akan memasukkannya ke dalam modul JS terpisah.

Yaitu, untuk logika yang tidak harus digabungkan menggunakan modul JS / kelas dalam file terpisah, dan menggunakan memerlukan / impor untuk memisahkan komponen dari "layanan".

Ini memungkinkan untuk injeksi ketergantungan dan pengujian unit keduanya secara independen.


1

atau Anda bisa menyuntikkan kelas warisan "http" ke Komponen Bereaksi

melalui objek alat peraga.

  1. perbarui:

    ReactDOM.render(<ReactApp data={app} />, document.getElementById('root'));
  2. Cukup edit React Component ReactApp seperti ini:

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

0

Nah pola yang paling sering digunakan untuk logika yang dapat digunakan kembali yang saya temui adalah menulis hook atau membuat file utils. Itu tergantung pada apa yang ingin Anda capai.

hooks/useForm.js

Seperti jika Anda ingin memvalidasi data formulir maka saya akan membuat kait kustom bernama useForm.js dan memberikannya formulir data dan sebagai gantinya akan mengembalikan saya sebuah objek yang berisi dua hal:

Object: {
    value,
    error,
}

Anda pasti dapat mengembalikan lebih banyak hal darinya saat Anda maju.

utils/URL.js

Contoh lain akan seperti Anda ingin mengekstrak beberapa informasi dari URL maka saya akan membuat file utils untuknya yang berisi fungsi dan mengimpornya di mana diperlukan:

 export function getURLParam(p) {
...
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.