- Not used Redux.
- Simple React Custom Hooks ( Code size is small ).
- All processing can be handled asynchronously, eliminating unnecessary processing.
$> npm install use-clutch
or
$> yarn add use-clutch
import * as React from "react";
import { render } from "react-dom";
type Action = { type: "increment" } | { type: "decrement" };
interface StoreType {
counter: number;
}
const state: StoreType = {
counter: 0
};
const sleep = (t: number) => new Promise(r => setTimeout(r, t, t));
const reducer = async (state: number, action: Action): Promise<StoreType> => {
switch (action.type) {
case "increment":
await sleep(5000);
return state + 1;
case "decrement":
await sleep(5000);
return state - 1;
default:
return state;
}
};
const App: React.FC = () => {
const clutch = useClutch(reducer, store);
const increment = () =>
clutch.dispatch("increment", { type: "increment" }).catch(console.error);
const decrement = () =>
clutch.dispatch("decrement", { type: "decrement" }).catch(console.error);
const add = () =>
clutch
.pipe(
"test",
state => ({ type: "increment" }),
state => (state.counter > 10 ? null : { type: "increment" })
)
.catch(console.error);
return (
<div>
<p>count : {clutch.counter}</p>
<button onClick={increment}>add</button>
<button onClick={decrement}>sub</button>
<button onClick={add}>if one addition is 10 or less, one more add</button>
</div>
);
};
render(<App />, document.getElementById("app"));
https://codesandbox.io/embed/use-clutch-playground-wnmyx
useClutch
is React Custom Hooks.
const clutch = useClutch(asyncReducer, initialValue);
-
asyncReducer
- Description : Reducer which returns Promise instance.
- Type :
(state: { [key : string] : any }, action: any) => Promise<{ [key : string] : any }>
-
initializeValue
- Description : Initial value of Store. The value must be Object.
- Type :
{ [key : string] : any }
-
clutch
- Description : Clutch Object.
- Type :
object
You can access to latest state value.
const clutch = useClutch(asyncReducer, initialValue);
const latest_state = clutch.state;
latest_state
- Description : Latest State Value.
- Type :
{ [key:string] : any }
Dispatch action. However, if the processing of the same request is in progress, it does not dispatch action.
const clutch = useClutch(asyncReducer, store);
const promise = clutch.dispatch(request, action_payload);
-
request
- Description : Request string.
- Type :
string
-
action_payload
- Description : Value to pass to the second argument of asyncReducer
- Type :
any
-
promise
- Description : Promise Instance.
- Type :
Promise<void>
Connect multiple Actions and dispatch as one Action.
const clutch = useClutch(asyncReducer, store);
const promise = clutch.pipe(
request,
actionCreator,
actionCreator2
);
-
request
- Description : Request string.
- Type :
string
-
actionCreator
- Description : Function to create action. Do nothing if you return Null. The latest state is passed as an argument.
- Type :
(state : any) => any | null
-
promise
- Description : Promise Instance.
- Type :
Promise<void>
Execute unrelated asynchronous processing with clutch. However, if the processing of the same request is in progress, it does not dispatch action.
const clutch = useClutch(asyncReducer, store);
const promiseCreator = () => asyncFunction();
const promise = clutch.request(request, promiseCreator);
-
request
- Description : Request string.
- Type :
string
-
promiseCreator
- Description : Fucntion to return Promise Instance.
- Type :
() => Promise<any>
-
promise
- Description : Promise Instance.
- Type :
Promise<any | null>
Stop a running asynchronous function.
const clutch = useClutch(asyncReducer, store);
const promiseCreator = () => asyncFunction();
const promise = clutch.request(request, promiseCreator);
const result = clutch.cancelRequest(request);
-
request
- Description : Request string to stop.
- Type :
string
-
result
- Description : Processing result.
- Type :
boolean
Monitor all request.
const clutch = useClutch(asyncReducer, store);
const unsubscribe = clutch.listenRequest(listener);
-
listener
- Description : Function to monitor a request.
- Type :
(request: string, status: "start" | "success" | "cancel" | "error") => void
-
unsubscribe
- Description : Function to cancel monitoring.
- Type :
() => void
Returns whether the passed request is in progress or not.
const clutch = useClutch(asyncReducer, store);
const progress = clutch.isProgress(request);
-
requeset
- Description : Request string.
- Type :
string
-
progress
- Description : Progress Status.
- Type :
boolean