Trela
Trela
is a framework for handling simple asynchronous processing and store management with react.
Feature
- Only for Hooks
- Asynchronous processing can be written simply
- The component view update considering component dependency
- TypeScript friendly
Install
$> npm install trela
or
$> yarn add trela
Example
import React from "react";import render from "react-dom";import createTrelaContext from "trela"; const apis = fetchUser: const ref = await ; const json = await ref; return json; // { name: "user name", age: 30 } const Provider useTrela = ; const App = const apis = ; const user isPending = apis; return <div> isPending ? <p>Now Loading ...</p> : null <h1>Current User</h1> <p>Name : user?name || "No name"}</p> <p>Age : userage || "No age"</p> </div> );; const Root = <Provider> <App /> </Provider>; ;
API
createTrelaContext
A function to create a Trela Context. The return value is an object that contains the Provider component and the useTrela function.
Example
const Provider useTrela = ;
Provider Component
A React component for providing Trela's API. Must be set to the root component of your app.
Example
const Provider = const App = /* ... */ const Root = <Provider> <App /> </Provider>
useTrela
useTrela
is React Custom Hooks what returns trela apis. The types are defined by TypeScript, and it is possible to execute APIs in a type-safe manner.
Example
const ExampleComponent = const apis steps all = ; /* ... */;
apis
apis
is an object that wraps the value of the apis
property passed to the createTrelaContext function. Note that the same function is contained inside, but the behavior is different.
Example
const Provider useTrela = ; /* ... */ const ExampleComponent = const apis = ; const fetchUser isLogin = apis; const user_id = 100; /** * @note Asynchronous processing does not start at this point * @note Also, You can pass arguments to the original fetchUser function */ const fetchUserRef = ; /** * @note Perform asynchronous processing * @return {User | null} fetchData - Contains the result of asynchronous processing or null * @return */ const fetchData isPending = fetchUserRef; /* ... */;
steps
Execute asynchronous actions serially.
Example
const ExampleComponent = const steps apis = ; const anyApi anyApi2 = apis; // Perform asynchronous actions in array order // In this example: anyApi -> anyApi2 const ref = ; const state isPending = ref; /* ... */;
all
Execute asynchronous actions in parallel.
Example
const ExampleComponent = const all apis = ; const anyApi anyApi2 = apis; // Execute asynchronous actions in parallel const ref = ; const state isPending = ref; /* ... */;
read
Execute asynchronous action only once and update the view when the action is complete. Also, This function can be directly written to the component field.
The return value is an array and the 0th value is the result of the asynchronous action or null, the 1st value is boolean indicating whether processing is being executed.
Example
const ExampleComponent = const apis = ; const state isPending = apis; /* ... */;
start
Execute asynchronous action. Skip the process when the action is running.
Example
const ExampleComponent = const apis = ; const anyAPI = apis; const onClick = ; ; return <> /* ... */ <button => Execute Action </button> /* ... */ </> ; /* ... */; /* ... */
cancel
Cancels a running asynchronous action.
Example
const ExampleComponent = const apis = ; const ref = apis; const state isPending = ref; const onClick = ref; ; return <> /* ... */ <button => Cancel asynchronous action </button> /* ... */ </> ;; /* ... */
default
Sets the default value for asynchronous actions. You can use this function to prevent null from entering the communication result.
Example
const ExampleComponent = const apis = ; const ref = apis; /** * @return */ const result isPending = ref; /* ... */; /* ... */
only
Running the API from the only property allows you to perform asynchronous actions so that the component views is not updated
Example
const ExampleComponent = const apis = ; const ref = apis; const result isPending = refonly; /* ... */; /* ... */