use-duck-state
v0.4.0
Published
![Language](https://img.shields.io/badge/language-typescript-blue.svg?label=language) ![Build](https://github.com/ChenKS12138/use-duck-state/workflows/Build/badge.svg) ![Testing](https://github.com/ChenKS12138/use-duck-state/workflows/Testing/badge.svg) [
Downloads
20
Readme
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>
);
}