{"id":22831280,"url":"https://github.com/masum184e/redux_rtk_query_basic_template","last_synced_at":"2026-04-30T00:08:30.305Z","repository":{"id":231252939,"uuid":"780938340","full_name":"masum184e/redux_rtk_query_basic_template","owner":"masum184e","description":"This repository provides a foundational structure for implementing CRUD (Create, Read, Update, Delete) operations using Redux Toolkit Query. Whether you're building a new application or seeking to enhance an existing one, this template offers a streamlined approach to managing data fetching.","archived":false,"fork":false,"pushed_at":"2024-04-19T06:07:56.000Z","size":87,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T07:11:17.275Z","etag":null,"topics":["data-fetching","react-redux","redux","redux-data-fetching","redux-rtk-query","redux-toolkit","rtk-query"],"latest_commit_sha":null,"homepage":"https://redux-rtk-query-basic-template.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/masum184e.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-02T12:55:12.000Z","updated_at":"2024-10-26T22:09:39.000Z","dependencies_parsed_at":"2024-04-19T07:25:59.977Z","dependency_job_id":"df3099a8-e264-4ce7-8249-afa7883a95ab","html_url":"https://github.com/masum184e/redux_rtk_query_basic_template","commit_stats":null,"previous_names":["masum184e/redux_rtk_query_basic_template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masum184e%2Fredux_rtk_query_basic_template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masum184e%2Fredux_rtk_query_basic_template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masum184e%2Fredux_rtk_query_basic_template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masum184e%2Fredux_rtk_query_basic_template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/masum184e","download_url":"https://codeload.github.com/masum184e/redux_rtk_query_basic_template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246403895,"owners_count":20771526,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-fetching","react-redux","redux","redux-data-fetching","redux-rtk-query","redux-toolkit","rtk-query"],"created_at":"2024-12-12T20:19:57.510Z","updated_at":"2026-04-30T00:08:25.285Z","avatar_url":"https://github.com/masum184e.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Redux RTK Query Basic Template\n\n\u003cp textAlign=\"justify\"\u003eRTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching \u0026 caching logic yourself.\u003c/p\u003e\n\n## Preview\n\u003cimg src=\"https://github.com/masum184e/redux_rtk_query_basic_template/blob/main/preview.png\" \u003e\n\u003ca href=\"https://redux-rtk-query-basic-template.vercel.app/\"\u003e\u003cb\u003eLive View\u003c/b\u003e\u003c/a\u003e\n\n## Requirements\n\n[Install Node On Your Device](https://nodejs.org/)\n\n## Installation\n\n```\nnpm install @reduxjs/toolkit react-redux\n```\n\n## How to Run\n\n```\ngit clone https://github.com/masum184e/redux_rtk_query_basic_template.git\ncd redux_rtk_query_basic_template\nnpm install\nnpm run dev\n```\n\n## Explaination\n\n\u003cp\u003e We bassically need 4 different component:\u003c/p\u003e\n\n1. **provider:**\n\n    The Provider component is provided by the react-redux library, which is the official React bindings for Redux. It is used at the top level of your React component tree to wrap your entire application. By doing so, it makes the Redux store available to all components in the application without needing to pass it explicitly through props at each level.\n\n    ```jsx\n    import React from 'react'\n    import ReactDOM from 'react-dom/client'\n    import App from './App.jsx'\n    import { Provider } from 'react-redux'\n    import { store } from '../redux/store.js'\n    import \"./index.css\"\n\n    ReactDOM.createRoot(document.getElementById('root')).render(\n    \u003cReact.StrictMode\u003e\n        \u003cProvider store={store}\u003e\n        \u003cApp /\u003e\n        \u003c/Provider\u003e\n    \u003c/React.StrictMode\u003e,\n    )\n\n2. **store:**\n\n    In Redux, the store is a central piece of the architecture that holds the state of your entire application. It serves as a single source of truth for your data.\n\n    ```jsx\n    import { configureStore } from '@reduxjs/toolkit';\n    import { setupListeners } from '@reduxjs/toolkit/query';\n    import { postApiSlice } from './slice/post';\n\n    export const store = configureStore({\n        reducer: {\n            [postApiSlice.reducerPath]: postApiSlice.reducer\n        },\n        middleware: (getDefaultMiddleware) =\u003e\n            getDefaultMiddleware().concat(postApiSlice.middleware)\n    });\n\n    setupListeners(store.dispatch);\n\n3. **slice:**\n\n    Slices play a crucial role in managing the cache and fetching data from APIs. RTK Query simplifies data fetching and caching by automatically generating slices for you based on the endpoints you define.\n\n    ```jsx\n    import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';\n\n    export const postApiSlice = createApi({\n        reducerPath: 'postApi',\n        baseQuery: fetchBaseQuery({\n            baseUrl: import.meta.env.VITE_API_URL\n        }),\n\n        endpoints: (builder) =\u003e ({\n            getAllPost: builder.query({\n                query: () =\u003e ({\n                    url: \"posts\",\n                    method: \"GET\"\n                })\n            }),\n            deletePost: builder.mutation({\n                query: (postId) =\u003e ({\n                    url: `posts/${postId}`,\n                    method: 'DELETe'\n                })\n            }),\n            addPost: builder.mutation({\n                query: (newPost) =\u003e ({\n                    url: \"posts\",\n                    method: 'POST',\n                    body: newPost\n                })\n            })\n        })\n    })\n\n    export const { useGetAllPostQuery, useDeletePostMutation, useAddPostMutation } = postApiSlice;\n\n4. **consumer:**\n\n    RTK Query automatically generates hooks for each endpoint you define using the `createApi` function. These hooks are named according to the convention `use{EndpointName}Query`, `use{EndpointName}Mutation` etc. Once you have fetched data using a query hook, you can consume it directly in your React components. The hook returns an object containing properties such as `data`, `isLoading`, `isFetching`, `error`, etc., which represent the current state of the data fetching process.\n\n    ```jsx\n    import { useState } from 'react';\n    import { useAddPostMutation, useGetAllPostQuery } from './../../redux/slice/post';\n\n    const Form = () =\u003e {\n        const [title, setTitle] = useState('');\n        const [description, setDescription] = useState('');\n\n        const [addPost] = useAddPostMutation();\n        const { refetch } = useGetAllPostQuery();\n\n        const handleSubmit = async (e) =\u003e {\n            e.preventDefault();\n            try {\n                await addPost({ title, description });\n                setTitle('');\n                setDescription('');\n                await refetch();\n            } catch (error) {\n                console.error('Error adding post:', error);\n            }\n        };\n\n        return (\n            \u003c\u003e\n                \u003cdiv className=\"bg-[#764ABC] p-4\"\u003e\n                    \u003cform onSubmit={handleSubmit}\u003e\n                        \u003cdiv className=\"mb-4\"\u003e\n                            \u003clabel htmlFor=\"title\" className=\"block text-white text-sm font-bold mb-2\"\u003eTitle\u003c/label\u003e\n                            \u003cinput type=\"text\" id=\"title\" name=\"title\" placeholder=\"Enter title\" value={title} onChange={(e) =\u003e setTitle(e.target.value)} className=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\" required/\u003e\n                        \u003c/div\u003e\n                        \u003cdiv className=\"mb-6\"\u003e\n                            \u003clabel htmlFor=\"description\" className=\"block text-white text-sm font-bold mb-2\"\u003eDescription\u003c/label\u003e\n                            \u003ctextarea id=\"description\" name=\"description\" placeholder=\"Enter description\" value={description} onChange={(e) =\u003e setDescription(e.target.value)} className=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline resize-none h-32\" required\u003e\u003c/textarea\u003e\n                        \u003c/div\u003e\n                        \u003cdiv className=\"flex items-center justify-end\"\u003e\n                            \u003cbutton type=\"submit\" className=\"bg-white text-[#764ABC] font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline\"\u003eSubmit\u003c/button\u003e\n                        \u003c/div\u003e\n                    \u003c/form\u003e\n                \u003c/div\u003e\n            \u003c/\u003e\n        );\n    };\n\n    export default Form;\n\n## Structure\n\n```\n├─ redux\n│  ├─ store.js\n│  ├─ slice\n│     └─ post.js\n│\n├─ src\n│  ├─components\n│  │ ├─ Form.jsx\n│  │ └─ List.jsx\n│  │\n│  ├─ App.jsx\n│  ├─ index.css\n│  └─ main.jsx\n│\n├─ .env\n├─ .eslintrc.cjs\n├─ .gitignore\n├─ index.html\n├─ package-lock.json\n├─ postcss.config.js\n├─ preview.png\n├─ README.md\n├─ tailwind.config.js\n├─ vercel.json\n└─ vite.config.js\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasum184e%2Fredux_rtk_query_basic_template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasum184e%2Fredux_rtk_query_basic_template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasum184e%2Fredux_rtk_query_basic_template/lists"}