Introducing Re-Actor: A TypeScript Library for Simplified Interactions with Internet Computer Canisters

Developers
,
1

Hello, fellow developers! :wave:

I’m excited to introduce Re-Actor, a TypeScript library designed to make your life easier when working with canisters on the Internet Computer. If you’ve been looking for a way to simplify the bridge between your frontend application and backend canisters, this library is for you!

What is Re-Actor?

Re-Actor is built to provide a seamless development experience by leveraging the power of Zustand for state management and strong typing for enhanced code quality. It aims to reduce the boilerplate code you have to write and manage when interacting with canisters.

Key Features

  • Strong Typing: Ensures type safety between your frontend and canister, reducing runtime errors.
  • State Management: Integrated Zustand-based state management for handling canister states efficiently.
  • Ease of Use: Simplified API for quick integration into your existing or new projects.
  • Flexibility: Designed to be compatible with both React and non-React projects.

Installation

Installing Re-Actor is as simple as running a single command:

npm install @re-actor/core

Quick Example

Here’s a quick example to demonstrate how you can use Re-Actor:

import createReActor from "@re-actor/core"
import { canisterId, createActor } from "declaration/actor"

const { ReActorProvider, useActorMethod } = createReActor(() =>
  createActor(canisterId)
)

const Balance = () => {
  const { call, data, error, loading } = useActorMethod("get_balance")

  return (
    <div>
      <button onClick={() => call()}>Fetch Balance</button>
      {loading && <p>Loading...</p>}
      {data && <p>Balance: {data}</p>}
      {error && <p>Error: {error}</p>}
    </div>
  )
}

const App = () => (
  <ReActorProvider>
    <Balance />
  </ReActorProvider>
)

Get Started

You can find more examples on the GitHub repository: Re-Actor GitHub Repository

Final Thoughts

I developed Re-Actor to contribute to the growing ecosystem of the Internet Computer and to make it easier for developers to build decentralized applications. I’m excited to see what you all build with it!

Feel free to ask any questions or provide feedback. Let’s make decentralized development easier, together!

Best regards,
Behrad

9 Likes
2

Example Usage on non-React

Installation

To install Re-actor, run the following command:

npm install @re-actor/store

First, initialize your actor:

Now, you can use createActorStoreAndActions to create a store and actions for this actor:

import createActorStoreAndActions from '@re-actor/store';

const [myStore, myActions] = createActorStoreAndActions(() => createActor(canisterId));

Initialize the Actor

Before making any calls, initialize the actor:

myActions.initialize();

Subscribe to Store Changes

You can subscribe to the store to get real-time updates:

const unsubscribe = myStore.subscribe((state) => {
  console.log("New state:", state);
});

// Later, to unsubscribe
unsubscribe();

Making a Call to getBalance

You can use the callActor action to make a call to your canister methods:

const fetchUserBalance = async () => {
  try {
    const balance = await myActions.callActor('get_balance');
    console.log("User balance:", balance);
  } catch (error) {
    console.error("Failed to fetch balance:", error);
  }
};

fetchUserBalance();
3 Likes