Conuse: Cách dễ nhất để Sử Dụng Context để Chia Sẻ Hooks trong React

conuse

Chia sẻ Hook bằng Context

Bắt đầu

import React, { useState } from 'react';
import createConuse from 'conuse';

// 1️⃣ Create a custom hook
const useCounter = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
};

// 2️⃣ Wrap your hook with the createConuse factory
const { ConuseProvider, useConuseContext } = createConuse({ counter: useCounter });

function Button() {
  // 3️⃣ Use context instead of custom hook
  const { increment } = useConuseContext('counter');
  return <button onClick={increment}>+</button>;
}

function Count() {
  // 4️⃣ Use context in other components
  const { count } = useConuseContext('counter');
  return <span>{count}</span>;
}

function App() {
  // 5️⃣ Wrap your components with Provider
  return (
    <ConuseProvider>
      <Count />
      <Button />
    </ConuseProvider>
  );
}

Cài đặt

npm:

npm i conuse

Yarn:

yarn add conuse

API

const { ConuseProvider, useConuseContext, getContext } = createConuse(useMap[, conuse])

Thư viện Conuse xuất khẩu một phương thức nhà máy duy nhất gọi là createConuse trả về kiểu conuse, như sau:

Conuse {
  ConuseProvider: React.FC<any>;
  useConuseContext: (name?: string) => any;
  getContext: (name?: string) => any;
}

useMap

Kiểu: { [name: string]: hook }

Nó nhận bản đồ hook tùy chỉnh, sử dụng nó để tạo nhiều hook. Bạn có thể lấy một hook bằng cách truyền tên vào tham số useConuseContext.

const { useConuseContext } = createConuse({ counter: useCounter });
const Component = () => {
  const { count } = useConuseContext('counter');
  return count;
};

conuse

Kiểu: Conuse

Sử dụng nó để tạo nhiều conuse.

const toggleConuse = createConuse({ toggle: useToggle });
const { useConuseContext } = createConuse({ counter: useCounter }, { toggle: toggleConuse });
const Component = () => {
  const { count } = useConuseContext('counter');
  const { toggle } = useConuseContext('toggle');
  return `${count}${toggle}`;
};

ConuseProvider

Kiểu: React.FC<any>

Giống như Context.Provider, để đặt ConuseProvider ở đầu ứng dụng của bạn.

<ConuseProvider>
  <App />
</ConuseProvider>

useConuseContext

Kiểu: (name?: string) => any

Các thành phần con của ConuseProvider có thể lấy được một hook cụ thể bằng cách sử dụng useConuseContext.

const [value, setValue] = useConuseContext(<name>)

Tham số name phải là một trong các khóa của useMap, và bạn có thể lấy giá trị trả về của hook tương ứng sẽ được thực thi.

Nếu bạn muốn lấy tất cả các hook, hãy không truyền tên vào useConuseContext. Nhưng kết quả của useConuseContext() là tất cả các hook, không phải giá trị trả về của tất cả các hook, bạn cần thực thi hàm hook để lấy state và setState.

getContext

Kiểu: (name?: string) => any

Sự khác biệt giữa getContext và useConuseContext là getContext có thể được sử dụng ở mọi nơi, không chỉ trong Component Hàm.

Sáng tạo

Cảm ơn constate và unstated-next về công việc tuyệt vời, và tôi đã học rất nhiều từ @kentcdodds’ Application State Management with React.

Thông tin tải về:

Tác giả: fodau
Nguồn: https://github.com/fodau/conuse