{"id":22363978,"url":"https://github.com/mfarhadattari/redux-intro","last_synced_at":"2025-03-26T15:19:40.821Z","repository":{"id":190954882,"uuid":"683585532","full_name":"mfarhadattari/redux-intro","owner":"mfarhadattari","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-30T13:59:36.000Z","size":4142,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T16:35:46.122Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/mfarhadattari.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}},"created_at":"2023-08-27T03:46:55.000Z","updated_at":"2023-09-08T05:31:50.000Z","dependencies_parsed_at":"2025-01-31T16:34:17.133Z","dependency_job_id":"ed33be4b-76fe-43dd-9670-507045eedf17","html_url":"https://github.com/mfarhadattari/redux-intro","commit_stats":null,"previous_names":["mfarhadattari/redux-intro"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfarhadattari%2Fredux-intro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfarhadattari%2Fredux-intro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfarhadattari%2Fredux-intro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfarhadattari%2Fredux-intro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfarhadattari","download_url":"https://codeload.github.com/mfarhadattari/redux-intro/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245678903,"owners_count":20654738,"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":[],"created_at":"2024-12-04T17:17:51.366Z","updated_at":"2025-03-26T15:19:40.798Z","avatar_url":"https://github.com/mfarhadattari.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux Intro\n\nRedux is an open-source JavaScript library for managing and centralizing application state.\n\n## REDUX CORE CONCEPTS:\n\n\u003cimg src=\"./src/assets/1.png\"  height=\"400px\"/\u003e\n\u003cimg src=\"./src/assets/2.png\" height=\"400px\"/\u003e\n\u003cimg src=\"./src/assets/3.png\" height=\"400px\"/\u003e\n\n## BASIC REDUX APP\n\n1. CREATE STORE\n\n```javaScript\nimport { configureStore } from \"@reduxjs/toolkit\";\n\nconst store = configureStore({\n  reducer: {},\n});\n\nexport default store;\n```\n\n2. CONNECT STORE WITH APP\n\n```javaScript\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { Provider } from \"react-redux\";\nimport App from \"./App.jsx\";\nimport \"./index.css\";\nimport store from \"./redux/store.js\";\n\nReactDOM.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```\n\n3. CREATE SLICE\n\n```javaScript\nimport { createSlice } from \"@reduxjs/toolkit\";\n\nconst initialState = {\n  count: 0,\n};\n\nconst counterSlice = createSlice({\n  name: \"counter\",\n  initialState,\n  reducers: { },\n});\n\nexport default counterSlice.reducer;\n```\n\n4. CONNECT SLICE WITH STORE\n\n```javascript\nimport { configureStore } from \"@reduxjs/toolkit\";\nimport counterReducer from \"./features/counter/counterSlice\";\n\nconst store = configureStore({\n  reducer: {\n    counter: counterReducer,\n  },\n});\n\nexport default store;\n```\n\n5. WRITE BUSINESS LOGIC IN REDUCER\n\n```javascript\nimport { createSlice } from \"@reduxjs/toolkit\";\n\nconst initialState = {\n  count: 0,\n};\n\nconst counterSlice = createSlice({\n  name: \"counter\",\n  initialState,\n  reducers: {\n    increment: (state) =\u003e {\n      state.count = state.count + 1;\n    },\n    decrement: (state) =\u003e {\n      state.count = state.count - 1;\n    },\n    incrementByValue: (state, actions) =\u003e {\n      state.count = state.count + actions.payload;\n    },\n  },\n});\n\nexport const { increment, decrement, incrementByValue } = counterSlice.actions;\n\nexport default counterSlice.reducer;\n```\n\n6. CONSUME STATE\n\n```javascript\nimport { useSelector } from \"react-redux\";\n\nconst ReduxCounter = () =\u003e {\n  const { count } = useSelector((state) =\u003e state.counter);\n\n  return (\n    \u003cdiv className=\"w-[300px] h-[220px] border-2 border-green-600 rounded-xl p-5 shadow-xl font-medium \"\u003e\n      \u003ch1 className=\"text-center text-xl uppercase\"\u003eRedux Counter\u003c/h1\u003e\n      \u003cdiv className=\"flex items-center justify-center mt-10 gap-5\"\u003e\n        \u003cbutton className=\"btn\"\u003eDecrease\u003c/button\u003e\n        \u003cdiv className=\"text-3xl\"\u003e{count}\u003c/div\u003e\n        \u003cbutton className=\"btn\"\u003eIncrease\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cbutton className=\"btn w-full mt-5\"\u003eIncrease 5\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ReduxCounter;\n```\n\n7. ACTION DISPATCH\n\n```javascript\nimport { useDispatch, useSelector } from \"react-redux\";\nimport {\n  decrement,\n  increment,\n  incrementByValue,\n} from \"../redux/features/counter/counterSlice\";\n\nconst ReduxCounter = () =\u003e {\n  const { count } = useSelector((state) =\u003e state.counter);\n  const dispatch = useDispatch();\n\n  return (\n    \u003cdiv className=\"w-[300px] h-[220px] border-2 border-green-600 rounded-xl p-5 shadow-xl font-medium \"\u003e\n      \u003ch1 className=\"text-center text-xl uppercase\"\u003eRedux Counter\u003c/h1\u003e\n      \u003cdiv className=\"flex items-center justify-center mt-10 gap-5\"\u003e\n        \u003cbutton className=\"btn\" onClick={() =\u003e dispatch(decrement())}\u003e\n          Decrease\n        \u003c/button\u003e\n        \u003cdiv className=\"text-3xl\"\u003e{count}\u003c/div\u003e\n        \u003cbutton className=\"btn\" onClick={() =\u003e dispatch(increment())}\u003e\n          Increase\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cbutton\n        className=\"btn w-full mt-5\"\n        onClick={() =\u003e dispatch(incrementByValue(5))}\n      \u003e\n        Increase 5\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ReduxCounter;\n```\n\n## Middleware\n\n### Create Middleware\n\n```javascript\nconst customLogger = (store) =\u003e (next) =\u003e (action) =\u003e {\n  const previousState = store.getState();\n  console.log(\"previousState :\", previousState);\n  console.log(\"actions :\", action);\n  next(action);\n  const newState = store.getState();\n  console.log(\"newState :\", newState);\n};\n\nexport default customLogger;\n```\n\n### Use Middleware\n\n```javaScript\nimport { configureStore } from \"@reduxjs/toolkit\";\nimport counterReducer from \"./features/counter/counterSlice\";\nimport customLogger from \"./middlewares/customLogger\";\n\nconst store = configureStore({\n  reducer: {\n    counter: counterReducer,\n  },\n  middleware: (getDefaultMiddleware) =\u003e\n    getDefaultMiddleware().concat(customLogger),\n});\n\nexport default store;\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfarhadattari%2Fredux-intro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfarhadattari%2Fredux-intro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfarhadattari%2Fredux-intro/lists"}