react-storex

This library provides a simple global state management solution with API integration, caching, and a custom React hook called useStore.It allows you to easily fetch, update, delete, and edit data while keeping your components in sync with a centralized store.

Features

• 🚀 Global state management with React hook interface
• 🔄 Automatic API synchronization with retry logic
• ⚡ Optimistic UI updates for mutations
• 🗄️ Intelligent caching with TTL support
• 🔄 Exponential backoff for failed requests
• ✨ Built-in CRUD operations for common data patterns

Installation

1npm install react-storex

Create a Store Instance

• Before using the hook, initialize the store in your application with an initial state.

1import { createStore } from "react-storex";
2
3const initialState = {
4  users: [],
5  products: [],
6};
7
8export const store = createStore(initialState);

Register API endpoints

• Register an API handler for a specific key in your store. This handler defines how data is fetched and sets a cache duration (in milliseconds):

1import { registerAPI } from "react-storex";
2
3registerAPI(
4  "items",
5  async () => {
6    const response = await fetch("/api/items");
7    const data = await response.json();
8    return data;
9  },
10  60000
11);
12// Cache duration: 60 seconds (optional) default is 60 seconds
13
14// if you want to register multiple endpoints, you can do it like this:
15
16const apiConfig = {
17  products: (urlPath = "") => apiClient(`products${urlPath}`),
18
19  addProduct: (productData) => apiClient("products", "POST", productData),
20};
21
22Object.entries(apiConfig).forEach(([key, handler]) => {
23  registerAPI(key, handler, 60000);
24});

Use the useStore Hook in Your Component

• Use the custom hook to connect your component to the store. This hook supports fetching, mutations, deleting, and editing data.

1import React from "react";
2import { useStore } from "react-storex";
3
4const ItemsList = () => {
5  const {
6    state,
7    isLoading,
8    isError,
9    executeMutation,
10    deleteItem,
11    editItem,
12    refreshData,
13  } = useStore({
14    key: "items", // the key of the item in the store (required)
15    method: "GET", // the method to use for the request (optional) e.g. 'GET', 'POST', 'PUT', 'DELETE'
16    payload: null, // the payload to send with the request (optional) e.g. { name: 'John' }
17    itemId: null, // the id of the item if you want to get specific items from array (optional) e.g. 1
18    urlPath: "", // the path to the url (optional) e.g. /items/1
19    keepCache: false, // whether to keep the cache of the item (optional) e.g. true, false
20    idKey: id, // Identifier key in your data objects, we need this to edit and delete the items (required)
21  });
22
23  if (isLoading) return <div>Loading...</div>;
24  if (isError) return <div>Error loading items.</div>;
25
26  const forceRefetch = () => {
27    refreshData();
28  };
29
30  return (
31    <div>
32      {state.map((item) => (
33        <div key={item.id}>
34          <span>{item.name}</span>
35          <button onClick={() => deleteItem(item.id)}>Delete</button>
36          <button onClick={() => editItem(item.id, { name: "Updated Name" })}>
37            Edit
38          </button>
39        </div>
40      ))}
41
42      <button onClick={() => forceRefetch()}>Force Refetch Data</button>
43    </div>
44  );
45};
46
47export default ItemsList;

Triggering Mutations in Your Component

• Example usage of executeMutation for POST or PUT requests

1const { executeMutation } = useStore({ key: "items", method: "PUT" });
2executeMutation({ id: 1, name: "New Item Name" });

Local Data Manipulation

• Example usage of deleteItem and editItem

1// **Delete an Item Locally from the Store**
2deleteItem(itemId);
3
4// **Edit an Item Locally in the Store**
5editItem(itemId, { name: "Updated Name" });

Clear Cache

1import { clearCache } from "react-storex";
2
3// **Clear Cache for a Specific Key**
4clearCache(key);
5
6// **Clear All Cache**
7clearCache();

Understanding Local Mutations

The library provides utility functions to modify the store's data locally:

• executeMutation: For performing POST or PUT operations. This function handles the API call, applies optimistic updates, and manages error handling.
• deleteItem: Removes an item from the store state by its ID, this will not make api call to the server insted it will delete the item from local store.
• editItem: Updates an item in the store state locally by merging updated fields, this will not make api call to the server insted it will edit the item from local store.

Retry Mechanism & Caching

• Retry Fetch: The retryFetch function automatically retries API calls with exponential backoff in case of errors.
• Caching: Data fetched from the API is cached for the duration specified during API registration. You can also manually clear the cache using the clearCache method on the store.

License

MIT