Một Hook React Đơn Giản cho Quản lý Trạng Thái Toàn Cục mà không cần Context API

react-hooks-global-state

Trạng thái toàn cục đơn giản cho React với Hooks API mà không cần Context API

Giới Thiệu

Đây là một thư viện để cung cấp trạng thái toàn cục bằng cách sử dụng React Hooks. Nó có các đặc điểm sau.

• Tối ưu hóa cho việc lấy và đặt trạng thái nông cạn.
• Thư viện quan tâm đến đối tượng trạng thái chỉ ở mức một cấp độ.
• Định nghĩa kiểu TypeScript
• Một hàm tạo tạo ra các hooks với kiểu dữ liệu được suy luận.
• Hỗ trợ middleware Redux một phần
• Một số thư viện trong hệ sinh thái Redux có thể được sử dụng.

Cài Đặt

npm install react-hooks-global-state

Sử Dụng

Kiểu setState

import React from 'react';
import { createGlobalState } from 'react-hooks-global-state';

const initialState = { count: 0 };
const { useGlobalState } = createGlobalState(initialState);

const Counter = () => {
  const [count, setCount] = useGlobalState('count');
  return (
    <div>
      <span>Counter: {count}</span>
      {/* update state by passing callback function */}
      <button onClick={() => setCount(v => v + 1)}>+1</button>
      {/* update state by passing new value */}
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
};

const App = () => (
  <>
    <Counter />
    <Counter />
  
);

Kiểu reducer

import React from 'react';
import { createStore } from 'react-hooks-global-state';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + 1 };
    case 'decrement': return { ...state, count: state.count - 1 };
    default: return state;
  }
};
const initialState = { count: 0 };
const { dispatch, useStoreState } = createStore(reducer, initialState);

const Counter = () => {
  const value = useStoreState('count');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

const App = () => (
  <>
    <Counter />
    <Counter />
  
);

API

createGlobalState

Tạo một trạng thái toàn cục.

Nó trả về một bộ các hàm

• useGlobalState: một hook tùy chỉnh hoạt động giống như React.useState
• getGlobalState: một hàm để lấy trạng thái toàn cục theo khóa ngoài React
• setGlobalState: một hàm để đặt trạng thái toàn cục theo khóa ngoài React
• subscribe: một hàm đăng ký theo dõi sự thay đổi của trạng thái

Tham Số

• initialState State

Ví Dụ

import { createGlobalState } from 'react-hooks-global-state';

const { useGlobalState } = createGlobalState({ count: 0 });

const Component = () => {
  const [count, setCount] = useGlobalState('count');
  ...
};

createStore

Tạo một cửa hàng toàn cục.

Nó trả về một bộ các hàm

• useStoreState: một hook tùy chỉnh để đọc trạng thái cửa hàng theo khóa
• getState: một hàm để lấy trạng thái cửa hàng theo khóa ngoài React
• dispatch: một hàm để gửi một hành động đến cửa hàng

Một cửa hàng hoạt động một cách tương tự như Redux, nhưng không giống nhau.

Tham Số

• reducer Reducer
• initialState State (tùy chọn, mặc định (reducer as any)(undefined,{type:undefined}))
• enhancer any?

Ví Dụ

import { createStore } from 'react-hooks-global-state';

const initialState = { count: 0 };
const reducer = ...;

const store = createStore(reducer, initialState);
const { useStoreState, dispatch } = store;

const Component = () => {
  const count = useStoreState('count');
  ...
};

Trả về Store

useGlobalState

useGlobalState được tạo bởi createStore đã bị lạc hậu.

Loại: function (stateKey: StateKey): any

Thông Tin Bổ Sung

• lạc hậu : sử dụng useStoreState thay thế

Ví Dụ

Thư mục ví dụ chứa các ví dụ hoạt động. Bạn có thể chạy một trong số chúng với

PORT=8080 npm run examples:01_minimal

và mở http://localhost:8080 trong trình duyệt web của bạn.

Bạn cũng có thể thử chúng trên codesandbox.io: 01 02 03 04 05 06 07 08 09 10 11 13

Chi Tiết Tải Về:

Tác Giả: dai-shi
Nguồn: https://github.com/dai-shi/react-hooks-global-state

Giấy Phép: MIT license