Tango UI

Tango Store

This is a minimalist state management library developed based on React. It uses only 100 lines of code to implement synchronous state updates and value transfer across components. The package size is only 7kb. You can use it in your project with confidence without any performance loss!

Benefit

The status sharing is convenient and suitable for small and medium-sized projects.
Minimal boilerplate code, improving development experience.
Data persistence avoids loss of state when refreshing the page.
High flexibility to meet different business needs.
A safe default value to prevent an error when the key does not exist.

New features

Easy to use：createTangoStore and useTango Provides a concise API,Consumers can easily create Store and subscribe to states.
Default value protection: Ensures that the default value of a state is not overwritten by an undefined value.
State change check: Events are dispatched only when the state actually changes, reducing invalid updates.
Error handling: Ensure that when accessing a non-existent key in useTango no error is thrown, but the default value is returned.

Key functions

Subscription status: Subscription status changes via store.subscribe.
Respond to state changes: When the state changes, update the local state of the component, triggering the component to re-render.
Unsubscribe: When the component is uninstalled, unsubscribe to avoid memory leaks.

Implementation details

useState： Used to maintain a local state in the component, the initial value is store.getState()[key]。
useEffect：Subscribe to state changes when the component is mounted; unsubscribe when the component is unmounted. When store dispatches a change event,useTango will get the latest state from the event and update the local state.
Performance optimization: Only the subscription function is triggered when the state is updated, avoiding unnecessary re-rendering and achieving efficient state updates.
React ecosystem:useTango Hook,integrates TangoStore into the React ecosystem, supports automatic UI updates when state changes occur, and makes development simpler.

Workflow

Create a Store: Users create a TangoStore instance through createTangoStore and pass in the initial state.
Update State: When a user updates the state via store.setState, TangoStore distributes a change event. Note: There is no need to worry about unrelated subscribers receiving the status as well, as we set the current state to only affect components that have introduced useTango Hook.
Subscription status: In a React component, the user clicks theuseTango Hook Subscribe to TangoStore state change. When the state changes, useTango The local state of the component is updated, triggering the component to re-render.
Unsubscribe: useTango when the component is uninstalled Automatically cancel the subscription to avoid memory leaks.

Follow these steps below

1.Installation

npm i tango-store-cw

2.Create store.js

Create store.js in the catalog

Description: createTangoStore() is a factory function that creates TangoStore instance. The user can pass in the initial state initialState, the function returns a new TangoStore instance.

import { createTangoStore } from "tango-store-cw";

// Define the initialValue
export const initialValue = createTangoStore({ name: "Lucy", age: 18 });

// Define the update function
export const setName = (v) => {
  initialValue.setState({ name: v });
};

export const setAge = (v) => {
  initialValue.setState({ age: v });
};

3.Use

Show datas on the page A

Description: useTango Hook for use in React Change in the status of the subscribed TangoStore in the component and return the specified key corresponding to the state value.

import React from "react";
import { initialValue } from "@/TangoStore/TangoStore";
import TSpace from "@/component/TSpace/index";
import { useTango } from "tango-store-cw";

const CaseA = () => {
  const name = useTango(initialValue, "name"); 
  const age = useTango(initialValue, "age"); 

  return (
    <div>
      <h1>Page A</h1>
      <TSpace>name in Tango:{name}</TSpace>
      <TSpace>age in Tango:{age}</TSpace>
    </div>
  );
};

export default CaseA;

Change datas on the page B

Note: Import the update functions setName and setAge to modify the initial values

import React from "react";
import { setName, setAge } from "@/TangoStore/TangoStore";
import TButton from "@/component/TButton/index";

const CaseB = () => {
  const ChangeValue = () => {
    setName("Brown");
    setAge(20);   
  };
  
  return (
    <div>
      <h1>Page B</h1>
      <TButton onClick={ChangeValue}>change the datas of Page B</TButton>
    </div>
  );
};

export default CaseB;