react-promiseful
Một thành phần React và hook để hiển thị các thành phần con dựa trên trạng thái của một promise.
Cài đặt
$ npm install react-promiseful
Thư viện này được viết bằng JavaScript hiện đại và được xuất bản dưới dạng biến thể đã biên dịch của CommonJS và ES module. Nếu bạn đích đến các trình duyệt cũ hơn, hãy chắc chắn biên dịch tương ứng.
Thử nghiệm
Bạn có thể xem một bản demo đơn giản của react-promiseful tại https://moxystudio.github.io/react-promiseful.
Sử dụng
Với**< PromiseState>** component :
import React, { useMemo, useState } from 'react';
import { PromiseState } from 'react-promiseful';
const SomeComponent = (props) => {
const [savePromise, setSavePromise] = useState();
const handleSave = useMemo(
() => () => setSavePromise(props.save()),
[props.save]
);
return (
<div>
<button disabled={ saveState.status === 'pending' } onSave={ handleSave }>
Save
</button>
<PromiseState promise={ savePromise }>
{ (saveState) => (
<p>
{ saveState.status === 'pending' && 'Saving...' }
{ saveState.status === 'fulfilled' && 'Saved!' }
{ saveState.status === 'rejected' && 'Oops, failed to save' }
</p>
) }
</PromiseState>
</div>
);
}
Với**usePromiseState()** hook :
import React, { useMemo, useState } from 'react';
import { usePromiseState } from 'react-promiseful';
const SomeComponent = (props) => {
const [savePromise, setSavePromise] = useState();
const saveState = usePromiseState(savePromise);
const handleSave = useMemo(
() => () => setSavePromise(props.save()),
[props.save]
);
return (
<div>
<button disabled={ saveState.status === 'pending' } onSave={ handleSave }>
Save
</button>
<p>
{ saveState.status === 'pending' && 'Saving..' }
{ saveState.status === 'fulfilled' && 'Saved!' }
{ saveState.status === 'rejected' && 'Oops, failed to save' }
</p>
</div>
);
}
API
<PromiseState>usePromiseState(promise, [options])getPromiseState(promise)
PromiseState
Thành phần <PromiseState> cho phép bạn hiển thị điều kiện cho các thành phần con dựa trên trạng thái của promise và giá trị thỏa mãn/từ chối. Nó sử dụng kỹ thuật render props để biết nên hiển thị gì.
Props
promise
Loại: Promise
Promise để theo dõi.
children
Một hàm render prop với chữ ký sau:
(state) => {}
Đối số state là một đối tượng chứa các thuộc tính sau:
statuslà một trong các giá trịnone(khi không có promise),pending,rejected,fulfilledvaluelà giá trị thỏa mãn hoặc từ chốiwithinThresholdcho biết chúng ta có nằm trongthresholdMsđược cấu hình hay không
thresholdMs
Loại: number
Mặc định: 0
Khoảng thời gian trong ms để xem promise có nằm trong ngưỡng không. Hữu ích nếu bạn muốn hiển thị trạng thái “đang tải” chỉ khi promise mất một thời gian nào đó.
Trạng thái sẽ chứa một thuộc tính boolean withinThreshold cho bạn sử dụng trong render prop children. Hơn nữa, bạn cũng có thể sử dụng các biến thể “withinThreshold” trong các thuộc tính statusMap và onSettleDelay.
statusMap
Loại: Object
Một đối tượng để ánh xạ các trạng thái, hữu ích khi bạn muốn sử dụng tên khác:
{
pending: 'loading',
fulfilled: 'success',
rejected: 'error',
}
Khi sử dụng thuộc tính thresholdMs, bạn cũng có thể ánh xạ các biến thể “withinThreshold”. Điều này hữu ích nếu bạn muốn ẩn phản hồi trực quan quá nhanh. Ví dụ, để tránh sử dụng bất kỳ biểu tượng quay và phản hồi thành công trong ngưỡng:
{
pendingWithinThreshold: 'none',
fulfilledWithinThreshold: 'none',
pending: 'loading',
fulfilled: 'success',
rejected: 'error',
}
Bạn có thể bỏ qua các trạng thái bạn không muốn ánh xạ và các trạng thái mặc định sẽ được sử dụng. Hơn nữa, nếu không có các trạng thái “withinThreshold” được định nghĩa, các biến thể bình thường của chúng sẽ được sử dụng.
onSettle
Loại: Function
Một hàm gọi mỗi khi promise thỏa mãn hoặc từ chối. Nó nhận state như đối số:
(state) => {}
Điều này hữu ích để kích hoạt một thay đổi trong giao diện người dùng sau khi promise được giải quyết:
const handleSettle = ({ status }) => {
if (status === 'fulfilled') {
complete(); // Imaginary function that completes the operation in the UI
}
};
onSettleDelayMs
Loại: number, Object
Mặc định: 0
Độ trễ trước khi gọi onSettle. Điều này hữu ích nếu bạn có các hiệu ứng thành công cần hoàn thành trước khi kích hoạt một thay đổi trong giao diện người dùng.
Bạn có thể chỉ định một số để chỉ số cùng một độ trễ cho cả trạng thái fulfilled và rejected hoặc một đối tượng chứa các độ trễ cụ thể:
{
fulfilled: 2000,
rejected: 2000,
}
Khi sử dụng thuộc tính thresholdMs, bạn cũng có thể ánh xạ các biến thể “withinThreshold”. Ví dụ, bạn có thể muốn gọi lại với độ trễ, trừ khi không có phản hồi trực quan:
{
fulfilledWithinThreshold: 0,
fulfilled: 2000,
rejected: 2000,
}
Bạn có thể bỏ qua các độ trễ mà bạn không muốn ánh xạ và các độ trễ mặc định sẽ được sử dụng. Hơn nữa, nếu không có các trạng thái “withinThreshold” được định nghĩa, các biến thể bình thường của chúng sẽ được sử dụng.
usePromiseState(promise, [options])
Phiên bản hook của thành phần <PromiseState>. Các options có sẵn cho cả hai đều hoàn toàn giống nhau.
const promiseState = usePromiseState(somePromise);
Giá trị trả về từ hook là trạng thái promise, một đối tượng chứa các thuộc tính sau:
statuslà một trong các giá trịnone(khi không có promise),pending,rejected,fulfilledvaluelà giá trị thỏa mãn hoặc giá trị từ chốiwithinThresholdcho biết chúng ta có nằm trongthresholdMsđược cấu hình hay không
getPromiseState(promise)
Trả về trạng thái promise hiện tại, một đối tượng với status và value.
Nếu promise chưa được sử dụng trong <PromiseState> hoặc usePromiseState(), trạng thái promise sẽ là pending.
Kiểm tra
$ npm test
$ npm test -- --watch # during development
Chi tiết tải xuống:
Tác giả: moxystudio
Nguồn: https://github.com/moxystudio/react-promiseful
Giấy phép: MIT license
