{"_id":"@ahsan-iftikhar-114/api-toolkit-redux","_rev":"2-e32a31b5c0276cc5077e5ccd9a8f12cc","name":"@ahsan-iftikhar-114/api-toolkit-redux","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ahsan-iftikhar-114/api-toolkit-redux","version":"1.0.0","keywords":["redux","redux-toolkit","axios","api","api-toolkit","react","typescript","http","rest-api"],"author":{"name":"Ahsan Iftikhar"},"license":"MIT","_id":"@ahsan-iftikhar-114/api-toolkit-redux@1.0.0","maintainers":[{"name":"ahsan-iftikhar-114","email":"em.ahsaniftikhar@gmail.com"}],"dist":{"shasum":"64291f8212383135f591032526d4a849e505f8a3","tarball":"https://registry.npmjs.org/@ahsan-iftikhar-114/api-toolkit-redux/-/api-toolkit-redux-1.0.0.tgz","fileCount":35,"integrity":"sha512-TXdZpij5Lg0n33kJYhJg8PelMwB5wH6HDoW4tzGWySO/weJfS2w5QuIPeyd/tf0iqOT+skEvEmJGtU39pG++SA==","signatures":[{"sig":"MEQCIBFzVfl2xmREyGgwUROjWCurh+TFbArGPAEJ4tpWhW59AiBjVhIop4yoWudqLQVMULdFV7k5jm+wE25G71D7TZCTwg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37579},"main":"dist/index.js","type":"commonjs","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"352a90a8d4e30dfe701f346d7327c78f26fab097","scripts":{"dev":"tsc --watch","build":"tsc","typecheck":"tsc --noEmit"},"_npmUser":{"name":"ahsan-iftikhar-114","email":"em.ahsaniftikhar@gmail.com"},"_npmVersion":"11.6.2","description":"A generic Redux Toolkit API solution with Axios, reusable API methods, thunks, slices and store configuration.","directories":{},"_nodeVersion":"24.13.0","dependencies":{"axios":"^1.0.0","react":"^18.0.0","react-redux":"^9.0.0","@reduxjs/toolkit":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^7.0.2","@types/react":"^19.2.18","@types/react-redux":"^7.1.34"},"peerDependencies":{"react":">=18","react-redux":">=8"},"_npmOperationalInternal":{"tmp":"tmp/api-toolkit-redux_1.0.0_1788853681264_0.1281475670672776","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ahsan-iftikhar-114/api-toolkit-redux","version":"1.0.1","description":"A generic Redux Toolkit API solution with Axios, reusable API methods, thunks, slices and store configuration.","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","dev":"tsc --watch","typecheck":"tsc --noEmit"},"keywords":["redux","redux-toolkit","axios","api","api-toolkit","react","typescript","http","rest-api"],"author":{"name":"Ahsan Iftikhar"},"license":"MIT","type":"commonjs","dependencies":{"@reduxjs/toolkit":"^2.0.0","axios":"^1.0.0","react":"^18.0.0","react-redux":"^9.0.0"},"devDependencies":{"@types/react":"^19.2.18","@types/react-redux":"^7.1.34","typescript":"^7.0.2"},"peerDependencies":{"react":">=18","react-redux":">=8"},"gitHead":"f89629fa4f296c886a09326bdaf00a1872d61a2c","_id":"@ahsan-iftikhar-114/api-toolkit-redux@1.0.1","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-z/JKfHjP8Zz3m+5lGAXMotRYqeBEcSMey0iWszaVY3yDXfJZOKuql4KTHkMz2xVY48D+wxpfp79y28kseLBL1g==","shasum":"5295c985628c70c6c608055d9fcfcb38abb2cf66","tarball":"https://registry.npmjs.org/@ahsan-iftikhar-114/api-toolkit-redux/-/api-toolkit-redux-1.0.1.tgz","fileCount":35,"unpackedSize":37931,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEYBjquF03u1LJNEaSpVc7rdhJRgEbdcOC/9YohNOCSgAiEAt3r9nGomDV852813Zzzt/cml9kN/gUnpYLqU6t47TIQ="}]},"_npmUser":{"name":"ahsan-iftikhar-114","email":"em.ahsaniftikhar@gmail.com"},"directories":{},"maintainers":[{"name":"ahsan-iftikhar-114","email":"em.ahsaniftikhar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/api-toolkit-redux_1.0.1_1788855378828_0.8192899865381185"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-08T07:48:01.063Z","modified":"2026-09-08T08:16:19.318Z","1.0.0":"2026-09-08T07:48:01.394Z","1.0.1":"2026-09-08T08:16:18.959Z"},"author":{"name":"Ahsan Iftikhar"},"license":"MIT","keywords":["redux","redux-toolkit","axios","api","api-toolkit","react","typescript","http","rest-api"],"description":"A generic Redux Toolkit API solution with Axios, reusable API methods, thunks, slices and store configuration.","maintainers":[{"name":"ahsan-iftikhar-114","email":"em.ahsaniftikhar@gmail.com"}],"readme":"# @ahsan-iftikhar-114/api-toolkit-redux\r\n\r\nA simple and reusable API toolkit for React applications.\r\n\r\nThis package combines **Axios** and **Redux Toolkit** to make API communication easier to manage.\r\n\r\nInstead of setting up Axios requests, Redux async thunks, Redux slices, loading states, error states, and reducers separately for every API, this package provides a simple and reusable approach.\r\n\r\n---\r\n\r\n## What Does This Package Do?\r\n\r\nWhen building a React application that communicates with a backend API, you usually need to handle several things:\r\n\r\n* Connecting to your API\r\n* Setting the API base URL\r\n* Sending GET, POST, PUT, PATCH, and DELETE requests\r\n* Sending authentication tokens\r\n* Managing loading states\r\n* Managing errors\r\n* Storing API results\r\n* Creating Redux async actions\r\n* Creating Redux reducers\r\n* Registering reducers in the Redux store\r\n\r\nThis package helps manage these things through a centralized and reusable system.\r\n\r\n---\r\n\r\n## Why Use This Package?\r\n\r\nWithout a reusable API system, a project can quickly become filled with repetitive API and Redux code.\r\n\r\nThis package provides a common structure so that your API requests can be created and managed consistently throughout your application.\r\n\r\nThe main idea is simple:\r\n\r\n**Configure your API once → Define your API requests → Use them wherever needed.**\r\n\r\n---\r\n\r\n# Installation\r\n\r\nInstall the package using npm:\r\n\r\n```bash\r\nnpm install @ahsan-iftikhar-114/api-toolkit-redux\r\n```\r\n\r\nThe package works with React, Axios, and Redux Toolkit.\r\n\r\nIf these packages are not already installed in your application, install them with:\r\n\r\n```bash\r\nnpm install react react-redux @reduxjs/toolkit axios\r\n```\r\n\r\n---\r\n\r\n# Getting Started\r\n\r\nUsing the package requires only a few basic steps.\r\n\r\n### Step 1 — Install the package\r\n\r\nInstall the package using npm.\r\n\r\n### Step 2 — Configure your API\r\n\r\nTell the package where your backend API is located.\r\n\r\n### Step 3 — Create your API requests\r\n\r\nDefine the API requests your application needs.\r\n\r\n### Step 4 — Connect the Redux store\r\n\r\nUse the provided Redux store with your React application.\r\n\r\n### Step 5 — Use the API state\r\n\r\nAccess loading, error, status, and response data from your components.\r\n\r\nThat's it.\r\n\r\n---\r\n\r\n# API Configuration\r\n\r\nBefore using API requests, configure your backend API URL.\r\n\r\nThe package provides a centralized configuration through `configureApi()`.\r\n\r\nThe API base URL is the main address of your backend.\r\n\r\nFor example:\r\n\r\n```text\r\nhttps://api.example.com/api\r\n```\r\n\r\nOnce configured, you only need to provide the endpoint when creating a request.\r\n\r\n---\r\n\r\n# Using Environment Variables\r\n\r\nIt is recommended to keep your API URL in your application's environment variables.\r\n\r\n**Do not create the `.env` file inside this package.**\r\n\r\nThe `.env` file belongs to the React application that is using the package.\r\n\r\nFor a Vite application, create:\r\n\r\n```text\r\n.env\r\n```\r\n\r\nand add:\r\n\r\n```env\r\nVITE_API_BASE_URL=https://api.example.com/api\r\n```\r\n\r\nThen use this value when configuring the package.\r\n\r\nThis makes it easy to use different API servers for different environments.\r\n\r\nFor example:\r\n\r\n```text\r\nDevelopment → Development API\r\nTesting      → Testing API\r\nProduction   → Production API\r\n```\r\n\r\nYou don't need to change the package itself when your API URL changes.\r\n\r\n---\r\n\r\n# Authentication\r\n\r\nIf your backend API requires an authentication token, the package can automatically attach a Bearer token to your API requests.\r\n\r\nYou can provide a fixed token or provide a function that retrieves the current token.\r\n\r\nThis is useful when your application stores the login token in:\r\n\r\n* Local Storage\r\n* Session Storage\r\n* Cookies\r\n* Another authentication system\r\n\r\nThe package will then send the token with your API requests.\r\n\r\n---\r\n\r\n# Creating API Requests\r\n\r\nThe package provides one main function for creating API requests:\r\n\r\n```text\r\napiRequest()\r\n```\r\n\r\nYou provide three things:\r\n\r\n```text\r\n1. Request name\r\n2. HTTP method\r\n3. API endpoint\r\n```\r\n\r\nFor example:\r\n\r\n```text\r\nRequest name → getUsers\r\nMethod       → GET\r\nEndpoint     → /users\r\n```\r\n\r\nThe package then creates the required Redux API handling automatically.\r\n\r\n---\r\n\r\n# Supported HTTP Methods\r\n\r\nThe package supports all commonly used HTTP methods:\r\n\r\n| Method | Purpose                         |\r\n| ------ | ------------------------------- |\r\n| GET    | Get information from the server |\r\n| POST   | Create new information          |\r\n| PUT    | Update existing information     |\r\n| PATCH  | Partially update information    |\r\n| DELETE | Delete information              |\r\n\r\n---\r\n\r\n# Sending Request Data\r\n\r\nFor requests that need data, such as POST, PUT, and PATCH requests, you can send your request data through the generated API request.\r\n\r\nThe package supports:\r\n\r\n* Request body\r\n* Query parameters\r\n* Custom headers\r\n* Axios request configuration\r\n\r\nThis allows the same API system to handle simple as well as more advanced API requests.\r\n\r\n---\r\n\r\n# Redux Integration\r\n\r\nThis package automatically creates the Redux logic required for each API request.\r\n\r\nYou don't have to manually create a separate Redux async thunk and slice for every API request.\r\n\r\nWhen an API request is created, the package handles its Redux state automatically.\r\n\r\nThe state includes:\r\n\r\n* `data`\r\n* `loading`\r\n* `error`\r\n* `status`\r\n\r\n---\r\n\r\n# API State\r\n\r\nEvery API request has its own state.\r\n\r\nThe `status` can be:\r\n\r\n```text\r\nidle\r\nloading\r\nsuccess\r\nerror\r\n```\r\n\r\nThis makes it easy to know what is happening with an API request.\r\n\r\nFor example:\r\n\r\n```text\r\nidle\r\n  ↓\r\nloading\r\n  ↓\r\nsuccess\r\n```\r\n\r\nIf something goes wrong:\r\n\r\n```text\r\nidle\r\n  ↓\r\nloading\r\n  ↓\r\nerror\r\n```\r\n\r\n---\r\n\r\n# Loading State\r\n\r\nThe package automatically tracks whether an API request is currently running.\r\n\r\nYou can use the loading state to show:\r\n\r\n* Loading indicators\r\n* Spinners\r\n* Skeleton screens\r\n* Disabled buttons\r\n* Loading messages\r\n\r\n---\r\n\r\n# Error Handling\r\n\r\nAPI errors are also managed through the Redux state.\r\n\r\nThis allows your application to easily display an appropriate message when:\r\n\r\n* The server returns an error\r\n* The request fails\r\n* The user is unauthorized\r\n* The server is unavailable\r\n* Another request error occurs\r\n\r\n---\r\n\r\n# Response Data\r\n\r\nAfter a successful API request, the returned data is available through the API state.\r\n\r\nThis means your React components can access the latest API result without creating separate state management logic for every request.\r\n\r\n---\r\n\r\n# Dynamic Redux Reducers\r\n\r\nThe package supports dynamic Redux reducer registration.\r\n\r\nWhen you create an API request, its corresponding Redux reducer is automatically registered with the package store.\r\n\r\nThis means you don't need to manually create and register a reducer for every API request.\r\n\r\n---\r\n\r\n# Redux Store\r\n\r\nThe package provides a Redux store that can be connected to your React application through the standard Redux Provider.\r\n\r\nOnce the store is connected, your application's components can use the API state managed by the package.\r\n\r\n---\r\n\r\n# Centralized API Configuration\r\n\r\nAPI configuration is managed from one central location.\r\n\r\nYou can configure:\r\n\r\n* API base URL\r\n* Request timeout\r\n* Default headers\r\n* Authentication token\r\n\r\nThis keeps API configuration consistent throughout your application.\r\n\r\n---\r\n\r\n# TypeScript Support\r\n\r\nThe package is written with TypeScript support in mind.\r\n\r\nYou can define the expected API response and request data types when creating API requests.\r\n\r\nThis helps provide:\r\n\r\n* Better autocomplete\r\n* Type checking\r\n* Safer API data handling\r\n* Better developer experience\r\n\r\n---\r\n\r\n# Recommended Project Setup\r\n\r\nFor a clean application structure, keep your API request definitions in a dedicated location within your application.\r\n\r\nFor example:\r\n\r\n```text\r\nsrc/\r\n│\r\n├── api/\r\n│\r\n├── components/\r\n│\r\n├── pages/\r\n│\r\n└── ...\r\n```\r\n\r\nYour API configuration can also be initialized from a central application entry point.\r\n\r\nThe exact project structure is completely up to you.\r\n\r\n---\r\n\r\n# Basic Workflow\r\n\r\nThe complete workflow of the package is:\r\n\r\n```text\r\nYour React Application\r\n        ↓\r\nConfigure API\r\n        ↓\r\nCreate API Request\r\n        ↓\r\nAxios Request\r\n        ↓\r\nBackend API\r\n        ↓\r\nAPI Response\r\n        ↓\r\nRedux State\r\n        ↓\r\nReact Components\r\n```\r\n\r\nThe package handles the API and Redux connection in between.\r\n\r\n---\r\n\r\n# Important Notes\r\n\r\n### API URL\r\n\r\nYour API base URL should be configured in your application.\r\n\r\nThe package does not require its own `.env` file.\r\n\r\n### Authentication\r\n\r\nIf your API requires authentication, configure the token through the package configuration.\r\n\r\n### Redux Provider\r\n\r\nThe package's Redux store must be connected to your React application through Redux Provider before using Redux-based API state.\r\n\r\n### Unique Request Names\r\n\r\nEach API request should have a unique name.\r\n\r\nFor example:\r\n\r\n```text\r\ngetUsers\r\ncreateUser\r\nupdateUser\r\ndeleteUser\r\ngetProducts\r\ngetOrders\r\n```\r\n\r\nUsing unique names keeps the generated Redux states separate.\r\n\r\n---\r\n\r\n# Requirements\r\n\r\nThis package is designed for applications using:\r\n\r\n* React\r\n* Redux Toolkit\r\n* React Redux\r\n* Axios\r\n\r\nTypeScript is recommended but not required for understanding the basic usage.\r\n\r\n---\r\n\r\n# Package Benefits\r\n\r\nWith this package, you can keep your application's API layer:\r\n\r\n* Simple\r\n* Reusable\r\n* Centralized\r\n* Consistent\r\n* Type-safe\r\n* Easy to maintain\r\n\r\nIt is especially useful for applications that contain many API endpoints and use Redux for state management.\r\n\r\n---\r\n\r\n# License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}