{"id":26670454,"url":"https://github.com/devjubayr/redux_note","last_synced_at":"2026-07-16T02:34:20.038Z","repository":{"id":284150583,"uuid":"953989253","full_name":"devjubayr/redux_note","owner":"devjubayr","description":"first redux demo project","archived":false,"fork":false,"pushed_at":"2025-10-21T19:23:49.000Z","size":33,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-07-16T02:34:19.356Z","etag":null,"topics":["react","reduxtoolkit"],"latest_commit_sha":null,"homepage":"https://first-reduxt-demo-project.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/devjubayr.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,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-24T11:52:09.000Z","updated_at":"2025-10-21T19:23:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"662eb2dc-d277-49db-bb6e-fc4685d0e9e6","html_url":"https://github.com/devjubayr/redux_note","commit_stats":null,"previous_names":["mr-jubayer/redux-demo","jubayerahmed2/redux-demo","crosbow/redux-demo","crosbow/redux_note","devjubayr/redux_note"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devjubayr/redux_note","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fredux_note","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fredux_note/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fredux_note/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fredux_note/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devjubayr","download_url":"https://codeload.github.com/devjubayr/redux_note/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fredux_note/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35528482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-16T02:00:06.687Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","reduxtoolkit"],"created_at":"2025-03-25T22:23:54.502Z","updated_at":"2026-07-16T02:34:20.033Z","avatar_url":"https://github.com/devjubayr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux Notes\n\n- Redux is a flexible **State Container** for JavaScript Apps that manages our application state **separately**.\n\n` npm i @reduxtjs/toolkit react-redux`\n\n## Redux app folder structure\n\n```\n    ├── src/\n    │ ├── features/ # 🎯 **Domain/Feature-specific logic** (The Core of the application)\n    │ │ ├── example1/ - Feature 1 folder\n    │ │ │ └── example1Slice.js - **Redux Slice for Feature 1**\n    │ │ │\n    │ │ ├── example2/ - Feature 2 folder\n    │ │ │ └── example2Slice.js - **Redux Slice for Feature 2**\n    │ │ │\n    │ │ └── common/ - Shared Redux logic (e.g., authentication, global status)\n```\n\n## 1. How to write a Slice?\n\n- Here how to write redux slice:\n\n```javascript\n    // features/examples/examples1Slice.js\n\n    const initialState = {\n        val: 5,\n        id: 1\n    }\n\n   const examplesSlice = {\n    name: \"examples\",\n    initialState,\n    reducers: {\n        increment(prevState, action) {\n            action.payload // to get the dispatched data\n            // and we can MUTABLY update state\n            ...action here\n\n            // Don't need return anything\n        },\n        ...more actions\n    }\n   }\n\n   export default examplesSlice.reducer; // \".reducer\" Because its a single reducer\n\n   // Now, we've to update export all actions written above ( increment, ...)\n\n   export const {increment, ...Others} = examplesSlice.actions;\n```\n\n## 2. Generate a Store\n\n```javascript\n// src/app/store.js\n\nimport \"configureStore\";\nimport \"example1Slice as examplesReducer\";\n\nconst store = configureStore({\n  reducer: {\n    examples: examplesReducer,\n  },\n});\n\nexport default store;\n```\n\n## 3. Define Redux in our React app ( main.jsx )\n\n```js\n    import store \"from store.js\"\n\n    \u003cReact.StrictMode\u003e\n        \u003cProvider store={store}\u003e\n            \u003cApp /\u003e\n        \u003c/Provider\u003e\n    \u003c/React.StrictMode\u003e\n\n    // The Provider from \"react-redux\"\n```\n\n## 4. Use counter value in React component\n\n```js\nconst example1 = useSelector((state) =\u003e state.example1);\n\n// \"useSelector\" comes from \"react-redux\"\n// callback state is refer the store.reducer\n```\n\n## 5. Dispatch Action\n\n```js\nimport \"'increment' action to to pass on dispatch function\";\n\nconst dispatch = useDispatch();\n\nconst handler = (data) =\u003e {\n  dispatch(increment(data)); // data is accessed by - action.payload\n};\n```\n\n## Fetching with redux-thunk/async-thunk\n\nHow it works?\n\n\u003e Dispatch Action \u003e Middleware \u003e Reducer \u003e Update UI\n\n\"Middleware\" - makes a async operation before perform the reducer action, on success it create actual action that reducer updates\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevjubayr%2Fredux_note","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevjubayr%2Fredux_note","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevjubayr%2Fredux_note/lists"}