Có dịch vụ trong ứng dụng React

Tôi đến từ thế giới góc cạnh nơi tôi có thể trích xuất logic cho một dịch vụ / nhà máy và sử dụng chúng trong bộ điều khiển của mình.

Tôi đang cố gắng hiểu làm thế nào tôi có thể đạt được điều tương tự trong ứng dụng React.

Giả sử tôi có một thành phần xác thực nhập mật khẩu của người dùng (đó là thế mạnh). Logic của nó khá phức tạp do đó tôi không muốn tự viết nó trong thành phần.

Tôi nên viết logic này ở đâu? Trong một cửa hàng nếu tôi đang sử dụng thông lượng? Hoặc có một lựa chọn tốt hơn?

Câu trả lời đầu tiên không phản ánh mô hình Container vs Presenter hiện tại .

Nếu bạn cần làm gì đó, như xác thực mật khẩu, bạn có thể có một chức năng thực hiện nó. Bạn sẽ chuyển chức năng đó cho chế độ xem có thể sử dụng lại dưới dạng chống đỡ.

Hộp đựng

Vì vậy, cách chính xác để làm điều đó là viết một Trình xác thực, sẽ có chức năng đó như một thuộc tính và bọc biểu mẫu trong đó, chuyển các đạo cụ phù hợp cho trẻ. Khi nói đến chế độ xem của bạn, vùng chứa trình xác nhận của bạn bao bọc chế độ xem của bạn và chế độ xem sẽ tiêu thụ logic của vùng chứa.

Xác thực có thể được thực hiện trong các thuộc tính của bộ chứa, nhưng bạn đang sử dụng trình xác nhận của bên thứ 3 hoặc bất kỳ dịch vụ xác thực đơn giản nào, bạn có thể sử dụng dịch vụ như một thuộc tính của thành phần bộ chứa và sử dụng nó trong các phương thức của bộ chứa. Tôi đã làm điều này cho các thành phần yên tĩnh và nó hoạt động rất tốt.

Nhà cung cấp

Nếu cần thêm một chút cấu hình, bạn có thể sử dụng mô hình Nhà cung cấp / Người tiêu dùng. Nhà cung cấp là một thành phần cấp cao bao bọc ở đâu đó gần và bên dưới đối tượng ứng dụng hàng đầu (đối tượng bạn gắn kết) và cung cấp một phần của chính nó, hoặc một thuộc tính được cấu hình ở lớp trên cùng, cho API ngữ cảnh. Sau đó tôi đặt các phần tử container của mình để sử dụng bối cảnh.

Các mối quan hệ bối cảnh cha mẹ / con cái không cần phải ở gần nhau, chỉ là đứa trẻ phải được hạ xuống theo một cách nào đó. Redux lưu trữ và chức năng React Router theo cách này. Tôi đã sử dụng nó để cung cấp một bối cảnh yên tĩnh gốc cho các thùng chứa còn lại của tôi (nếu tôi không cung cấp riêng của mình).

(lưu ý: API ngữ cảnh được đánh dấu thử nghiệm trong các tài liệu, nhưng tôi không nghĩ nó còn nữa, xem xét những gì sử dụng nó).

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

Một cách khác mà tôi chưa từng thử, nhưng thấy được sử dụng, là sử dụng phần mềm trung gian kết hợp với Redux. Bạn xác định đối tượng dịch vụ của mình bên ngoài ứng dụng hoặc ít nhất là cao hơn cửa hàng redux. Trong quá trình tạo cửa hàng, bạn tiêm dịch vụ vào phần mềm trung gian và phần mềm trung gian xử lý mọi hành động ảnh hưởng đến dịch vụ.

Theo cách này, tôi có thể đưa đối tượng restful.js của mình vào phần mềm trung gian và thay thế các phương thức chứa của mình bằng các hành động độc lập. Tôi vẫn cần một thành phần chứa để cung cấp các hành động cho lớp dạng xem biểu mẫu, nhưng kết nối () và mapDispatchToProps đã được tôi đề cập ở đó.

Ví dụ, v4 Reac-router-redux mới sử dụng phương pháp này để tác động đến trạng thái của lịch sử.

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

Vấn đề trở nên cực kỳ đơn giản khi bạn nhận ra rằng dịch vụ Angular chỉ là một đối tượng cung cấp một tập hợp các phương thức độc lập theo ngữ cảnh. Đó chỉ là cơ chế Angular DI khiến nó trông phức tạp hơn. DI rất hữu ích vì nó đảm nhiệm việc tạo và duy trì các thể hiện cho bạn nhưng bạn không thực sự cần nó.

Hãy xem xét một thư viện AJAX phổ biến có tên axios (mà bạn có thể đã nghe nói đến):

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

Nó không hoạt động như một dịch vụ? Nó cung cấp một tập hợp các phương thức chịu trách nhiệm cho một số logic cụ thể và độc lập với mã chính.

Trường hợp ví dụ của bạn là về việc tạo một tập hợp các phương thức riêng biệt để xác thực các đầu vào của bạn (ví dụ: kiểm tra cường độ mật khẩu). Một số gợi ý để đặt các phương thức này bên trong các thành phần mà đối với tôi rõ ràng là một mô hình chống. Điều gì xảy ra nếu xác thực liên quan đến việc thực hiện và xử lý các cuộc gọi phụ trợ XHR hoặc thực hiện các phép tính phức tạp? Bạn có thể trộn logic này với các trình xử lý nhấp chuột và các công cụ cụ thể khác về UI không? Vô lý. Tương tự với cách tiếp cận container / HOC. Gói thành phần của bạn chỉ để thêm một phương thức sẽ kiểm tra xem giá trị có một chữ số trong đó không? Nào.

Tôi sẽ chỉ tạo một tệp mới có tên là 'ValidationService.js' và sắp xếp nó như sau:

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

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

export default ValidationService;

Sau đó, trong thành phần của bạn:

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

...

//inside the component
yourInputChangeHandler(event) {

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

Sử dụng dịch vụ này từ bất cứ nơi nào bạn muốn. Nếu quy tắc xác thực thay đổi, bạn chỉ cần tập trung vào tệp ValidationService.js.

Bạn có thể cần một dịch vụ phức tạp hơn phụ thuộc vào các dịch vụ khác. Trong trường hợp này, tệp dịch vụ của bạn có thể trả về một hàm tạo lớp thay vì một đối tượng tĩnh để bạn có thể tự tạo một thể hiện của đối tượng trong thành phần. Bạn cũng có thể xem xét triển khai một singleton đơn giản để đảm bảo rằng luôn có một phiên bản của đối tượng dịch vụ được sử dụng trên toàn bộ ứng dụng.

Tôi cần một số logic định dạng để được chia sẻ trên nhiều thành phần và vì một nhà phát triển Angular cũng tự nhiên nghiêng về một dịch vụ.

Tôi đã chia sẻ logic bằng cách đặt nó vào một tệp riêng biệt

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

module.exports = {
    format: format
};

và sau đó nhập nó dưới dạng một mô-đun

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

//then in component

    render() {

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

Hãy nhớ rằng mục đích của React là kết hợp tốt hơn những thứ hợp lý. Nếu bạn đang thiết kế một phương thức "xác thực mật khẩu" phức tạp, thì nó nên được ghép ở đâu?

Chà, bạn sẽ cần sử dụng nó mỗi khi người dùng cần nhập mật khẩu mới. Điều này có thể là trên màn hình đăng ký, màn hình "quên mật khẩu", quản trị viên "đặt lại mật khẩu cho người dùng khác", v.v.

Nhưng trong bất kỳ trường hợp nào, nó sẽ luôn được gắn với một số trường nhập văn bản. Vì vậy, đó là nơi nó nên được ghép nối.

Tạo một thành phần React rất nhỏ chỉ bao gồm một trường đầu vào và logic xác thực liên quan. Nhập thành phần đó trong tất cả các biểu mẫu có thể muốn có mật khẩu nhập.

Về cơ bản, kết quả tương tự như việc có một dịch vụ / nhà máy cho logic, nhưng bạn đang ghép nó trực tiếp với đầu vào. Vì vậy, bây giờ bạn không bao giờ cần phải nói chức năng đó ở đâu để tìm đầu vào xác thực của nó, vì nó được gắn kết vĩnh viễn với nhau.

Tôi cũng đến từ khu vực Angular.js và các dịch vụ và nhà máy trong React.js đơn giản hơn.

Bạn có thể sử dụng các hàm hoặc lớp đơn giản, kiểu gọi lại và sự kiện Mobx như tôi :)

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

Đây là ví dụ đơn giản:

Tình huống tương tự: Đã thực hiện nhiều dự án Angular và chuyển sang React, không có cách đơn giản nào để cung cấp dịch vụ thông qua DI có vẻ như là một phần còn thiếu (các chi tiết của dịch vụ sang một bên).

Sử dụng bối cảnh và trang trí ES7, chúng ta có thể đến gần:

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

Có vẻ như những kẻ này đã tiến một bước xa hơn / theo một hướng khác:

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

Vẫn cảm thấy như làm việc chống lại hạt. Sẽ xem lại câu trả lời này trong 6 tháng sau khi thực hiện một dự án React lớn.

EDIT: Trở lại 6 tháng sau với một số kinh nghiệm React. Hãy xem xét bản chất của logic:

1. Có bị ràng buộc (chỉ) với UI? Di chuyển nó thành một thành phần (câu trả lời được chấp nhận).
2. Có bị ràng buộc (chỉ) với quản lý nhà nước? Di chuyển nó vào một thunk .
3. Bị ràng buộc với cả hai? Di chuyển đến tập tin riêng biệt, tiêu thụ trong thành phần thông qua bộ chọn và trong thunks.

Một số cũng tiếp cận với HOC để tái sử dụng nhưng đối với tôi, phần trên bao gồm hầu hết các trường hợp sử dụng. Ngoài ra, hãy xem xét mở rộng quản lý nhà nước bằng cách sử dụng vịt để giữ mối quan tâm riêng biệt và trung tâm UI nhà nước.

Tôi cũng đến từ Angular và đang thử React, đến bây giờ, một cách được đề xuất (?) Dường như đang sử dụng các Thành phần bậc cao :

Thành phần bậc cao (HOC) là một kỹ thuật nâng cao trong React để sử dụng lại logic thành phần. HOC không phải là một phần của API React, mỗi se. Chúng là một mô hình xuất hiện từ bản chất sáng tác của React.

Hãy nói rằng bạn có inputvà textareavà muốn áp dụng logic xác nhận tương tự:

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

Sau đó viết một HOC xác nhận hợp lệ và kiểu bao bọc thành phầ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} />
    }
  }
}

Bây giờ những HOC đó có chung hành vi xác nhận:

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

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

Tôi đã tạo một bản demo đơn giản .

Chỉnh sửa : Một bản demo khác đang sử dụng các đạo cụ để truyền một mảng các hàm để bạn có thể chia sẻ logic được tạo bởi nhiều hàm xác thực trên HOCcác s như:

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

Edit2 : React 16.8+ cung cấp một tính năng mới, Hook , một cách hay khác để chia sẻ logic.

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

Dịch vụ không giới hạn ở Angular, ngay cả trong Angular2 + ,

Dịch vụ chỉ là tập hợp các chức năng của người trợ giúp ...

Và có nhiều cách để tạo chúng và tái sử dụng chúng trên ứng dụng ...

1) Chúng có thể là tất cả các chức năng riêng biệt được xuất từ ​​tệp js, tương tự như dưới đây:

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

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

2) Chúng ta cũng có thể sử dụng phương thức nhà máy như, với bộ sưu tập các hàm ... với ES6, nó có thể là một lớp chứ không phải là hàm tạo:

class myService {

  constructor() {
    this._data = null;
  }

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

  getMyService() {
    return this._data;
  }

}

Trong trường hợp này, bạn cần tạo một cá thể với khóa mới ...

const myServiceInstance = new myService();

Ngoài ra, trong trường hợp này, mỗi trường hợp có cuộc sống riêng của nó, vì vậy hãy cẩn thận nếu bạn muốn chia sẻ nó, trong trường hợp đó bạn chỉ nên xuất trường hợp bạn muốn ...

3) Nếu chức năng và dụng cụ của bạn sẽ không được chia sẻ, bạn thậm chí có thể đặt chúng vào thành phần React, trong trường hợp này, giống như chức năng trong thành phần phản ứng của bạn ...

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

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

4) Một cách khác bạn có thể xử lý mọi thứ, có thể là sử dụng Redux , đó là một cửa hàng tạm thời cho bạn, vì vậy nếu bạn có nó trong ứng dụng React của mình , nó có thể giúp bạn với nhiều chức năng setter getter bạn sử dụng ... Nó giống như một cửa hàng lớn theo dõi các trạng thái của bạn và có thể chia sẻ nó trên các thành phần của bạn, vì vậy có thể thoát khỏi nhiều nỗi đau cho những thứ setter getter mà chúng ta sử dụng trong các dịch vụ ...

Làm mã DRY luôn tốt và không lặp lại những gì cần sử dụng để làm cho mã có thể sử dụng lại và có thể đọc được, nhưng đừng cố làm theo các cách Angular trong ứng dụng React , như đã đề cập trong mục 4, sử dụng Redux có thể làm giảm nhu cầu của bạn các dịch vụ và bạn giới hạn sử dụng chúng cho một số chức năng trợ giúp có thể sử dụng lại như mục 1 ...

Tôi đang ở trong cùng một khởi động như bạn. Trong trường hợp bạn đề cập, tôi sẽ triển khai thành phần UI xác thực đầu vào dưới dạng thành phần React.

Tôi đồng ý việc thực hiện logic xác thực chính nó (phải) không được kết hợp. Vì vậy, tôi sẽ đặt nó vào một mô-đun JS riêng biệt.

Đó là, đối với logic không nên được ghép nối, hãy sử dụng mô-đun / lớp JS trong tệp riêng biệt và sử dụng yêu cầu / nhập để tách cặp thành phần khỏi "dịch vụ".

Điều này cho phép tiêm phụ thuộc và thử nghiệm đơn vị của hai độc lập.

hoặc bạn có thể thêm "http" kế thừa lớp vào Thành phần Phản ứng

thông qua đạo cụ đối tượng.

1. cập nhật:

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

2. Đơn giản chỉ cần chỉnh sửa Thành phần ReactApp như thế này:

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

Vâng, mẫu được sử dụng nhiều nhất cho logic có thể sử dụng lại mà tôi đã gặp là viết hook hoặc tạo tệp utils. Nó phụ thuộc vào những gì bạn muốn thực hiện.

hooks/useForm.js

Giống như nếu bạn muốn xác thực dữ liệu biểu mẫu thì tôi sẽ tạo một hook tùy chỉnh có tên useForm.js và cung cấp cho nó dữ liệu biểu mẫu và đổi lại, nó sẽ trả về cho tôi một đối tượng chứa hai thứ:

Object: {
    value,
    error,
}

Bạn chắc chắn có thể trả lại nhiều thứ từ nó khi bạn tiến bộ.

utils/URL.js

Một ví dụ khác giống như bạn muốn trích xuất một số thông tin từ một URL sau đó tôi sẽ tạo một tệp utils cho nó có chứa một hàm và nhập nó vào nơi cần thiết:

 export function getURLParam(p) {
...
}