Getting Started

What is ReactDataSync

ReactDataSync is a powerful framework for handling API requests and data synchronization in React applications.

Prerequisites

The following prerequisites are required for ReactDataSync to function properly:

• Node.js (v14.0.0 or later)
• npm (Node Package Manager)

Tip

You can use npm -v and node -v to verify that you already have Node.js and npm installed.

Installation

1. Clone the repository:

   git clone https://github.com/mattszymanko/ReactDataSync.git

2. Navigate to the project directory:

   cd ReactDataSync

3. Install dependencies:

   npm install

Important

Ensure that you have the necessary dependencies installed before proceeding.

Usage Overview

API Service Layer

Initializing the ApiService

In your project, initialize the ApiService by importing it and creating an instance:

// Import the ApiService
import ApiService from './path-to-api-service';

// Create an instance of the ApiService
const apiService = new ApiService();

Warning

Make sure to adjust the path to the ApiService based on your project structure.

Making API Requests

Use the apiService instance to make API requests:

// Example: Making a GET request
apiService.get('/posts')
  .then(response => console.log('GET Request Response:', response))
  .catch(error => console.error('GET Request Error:', error));

Warning

Ensure to handle promise rejections appropriately in your application.

Middleware

ReactDataSync comes with middleware for common API-related tasks.

Response Transformer Middleware

Use the responseTransformer middleware to customize API response transformations:

// Import the responseTransformer
import { responseTransformer } from './path-to-middleware';

// Apply the responseTransformer to the ApiService
apiService.use(responseTransformer);

Caution

Ensure to carefully implement the logic within the responseTransformer to avoid unintended side effects.

Error Handler Middleware

Implement the errorHandler middleware to handle API request errors:

// Import the errorHandler
import { errorHandler } from './path-to-middleware';

// Apply the errorHandler to the ApiService
apiService.use(errorHandler);

Note

The errorHandler can be customized to suit your application's error handling strategy.

React Component Integration

Example: App Component

Integrate the ApiService into your React components:

// Import the ApiService
import apiService from './path-to-api-service';

// Use the ApiService in your component
const App = () => {
  // Make API requests using apiService
  // ...

  return (
    <div>
      {/* Your component content */}
    </div>
  );
};

export default App;

Warning

Ensure to import the apiService at the top of your components.

Utility Functions

The commonUtils.ts file provides a set of utility functions for various common tasks. Import and use them in your project:

// Import utility functions
import { capitalizeFirstLetter, formatDate, debounce, /* ... */ } from './path-to-common-utils';

Warning

Be cautious while using utility functions and understand their behavior before implementation.

Configuration Management

Configure your environment-based settings using the apiConfig.js file:

// Import the configuration
import config from './path-to-api-config';

// Access configuration values
const apiBaseUrl = config.API_BASE_URL;
const apiKey = config.API_KEY;

Logging Utility

The logger.ts file provides a flexible logging utility. Import and use it in your project:

// Import the logger
import logger from './path-to-logger';

// Log messages at different levels
logger.debug('Debug message');
logger.info('Info message');
logger.warn('Warning message');
logger.error('Error message');

Tip

Adjust log levels appropriately and avoid excessive logging in production.