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>
    </>
  );
};