use-duck-state

A React Hooks Library To Manage Component State.

use-duck-state是受saga-duck启发的基于redux-saga和hooks的组件状态管理的方案

Example

Usage

import {
  createDuckStateHook,
  Duck,
  reduceFromPayload,
  createToPayload,
} from "use-duck-state";
import createSagaMiddleware from "redux-saga";
import { useEffect, useMemo, useState, useRef } from "react";

import { createLogger } from "redux-logger";

const loggerMiddleware = createLogger({
  collapsed: false,
});

const useDuckState = createDuckStateHook(
  {
    createSagaMiddleware,
    useEffect,
    useMemo,
    useState,
    useRef,
  },
  [loggerMiddleware]
);

class AppDuck extends Duck {
  get quickTypes() {
    enum Type {
      SET_COUNT,
    }
    return {
      ...super.quickTypes,
      ...Type,
    };
  }
  get reducers() {
    const { types } = this;
    return {
      count: reduceFromPayload<number>(types.SET_COUNT, 0),
    };
  }
  get creators() {
    const { types } = this;
    return {
      setCount: createToPayload<number>(types.SET_COUNT),
    };
  }
  get rawSelectors() {
    type State = this["State"];
    return {
      doubleCount(state: State) {
        return state.count * 2;
      },
    };
  }
  *saga() {
    yield fork([this, this.watchCount]);
  }
  *watchCount() {
    const { types, selectors } = this;
    yield takeLatest([types.SET_COUNT], function* (action) {
      const { count } = selectors(yield select());
      console.log(`types.SET_COUNT changed, now count is ${count}`, action);
    });
  }
}

function App() {
  const { dispatch, duck, store } = useDuckState(AppDuck);
  const { count, doubleCount } = duck.selectors(store);
  return (
    <div>
      <button
        onClick={() => {
          dispatch(duck.creators.setCount(count - 1));
        }}
      >
        {"-"}
      </button>
      <span>{count}</span>
      <button
        onClick={() => {
          dispatch(duck.creators.setCount(count + 1));
        }}
      >
        {"+"}
      </button>
      <div>double count is: {doubleCount}</div>
    </div>
  );
}