❤
npm
Sign UpSign In

tidux
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

tidux

Fast, small state management lib for React

Features

  1. No store needed
  2. No Provider needed
  3. No reducer needed
  4. No action types needed
  5. Fluently state mutating, just assign new values to writable variables
  6. Simple API: subscribe, dispatch, useSelector
  7. Handling future action dispatching easily
  8. Support cancellable async dispatching
  9. Best for code splitting

Basic Counter

import React from "react";
import { dispatch, useSelector } from "tidux";
 
let $count = 0;
const Increase = () => $count++;
const App = () => {
  const count = useSelector(() => $count);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => dispatch(Increase)}>Increase</button>
    </>
  );
};

Async Counter

import React from "react";
import { dispatch, useSelector, delay } from "tidux";
 
let $count = 0;
const Increase = async () => {
  await delay(1000);
  $count++;
};
const App = () => {
  const count = useSelector(() => $count);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => dispatch(Increase)}>Increase</button>
    </>
  );
};

Calling another action inside current action (unsafe way)

import React from "react";
import { dispatch, useSelector, delay } from "tidux";
 
let $count = 0;
const Increase = () => $count++;
const IncreaseAsync = async () => {
  await delay(1000);
  Increase();
};
const App = () => {
  const count = useSelector(() => $count);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => dispatch(Increase)}>Increase</button>
      <button onClick={() => dispatch(IncreaseAsync)}>Increase Async</button>
    </>
  );
};

Calling another action inside current action (safe way)

import React from "react";
import { dispatch, useSelector } from "tidux";
 
let $count = 0;
const Increase = () => $count++;
const IncreaseAsync = async (payload, { dispatch, delay }) => {
  await delay(1000);
  dispatch(Increase);
};
const App = () => {
  const count = useSelector(() => $count);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => dispatch(Increase)}>Increase</button>
      <button onClick={() => dispatch(IncreaseAsync)}>Increase Async</button>
    </>
  );
};

Readme

Keywords

Package Sidebar

Install

npm i tidux

Repository

github.com/linq2js/tidux

Homepage

github.com/linq2js/tidux#readme

Weekly Downloads

2

Version

0.0.6

License

ISC

Unpacked Size

19.8 kB

Total Files

10

Last publish

Collaborators

  • linq2js
Try on RunKit
Report malware