{"id":21877443,"url":"https://github.com/erabossid/react-usereducer","last_synced_at":"2025-03-10T14:23:08.088Z","repository":{"id":166676989,"uuid":"296792291","full_name":"erabosscode/react-usereducer","owner":"erabosscode","description":null,"archived":false,"fork":false,"pushed_at":"2020-09-24T16:16:48.000Z","size":2858,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T02:22:54.762Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://thetradecoder.github.io/react-usereducer/","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/erabosscode.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":"2020-09-19T05:20:43.000Z","updated_at":"2020-09-24T16:13:24.000Z","dependencies_parsed_at":"2023-06-09T08:30:46.454Z","dependency_job_id":null,"html_url":"https://github.com/erabosscode/react-usereducer","commit_stats":null,"previous_names":["tradecoder/react-usereducer","logixmaster/react-usereducer","mydigita/react-usereducer","erabossid/react-usereducer","erabosstt/react-usereducer","erabosscode/react-usereducer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erabosscode%2Freact-usereducer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erabosscode%2Freact-usereducer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erabosscode%2Freact-usereducer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erabosscode%2Freact-usereducer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erabosscode","download_url":"https://codeload.github.com/erabosscode/react-usereducer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242865030,"owners_count":20197822,"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-11-28T08:09:17.285Z","updated_at":"2025-03-10T14:23:08.070Z","avatar_url":"https://github.com/erabosscode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Hooks - useReducer\n\n## counter app code\n```\nimport React, {useReducer} from 'react';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport '../App.css';\n\nconst PLUS =\"PLUS\";\nconst MINUS = \"MINUS\";\n\nfunction reducer(state, action){\n    switch(action.operator){\n        case PLUS:\n            return state + 1;\n        case MINUS:\n            return state\u003c=0?0:state-1;\n        default:\n            return state;\n    }\n}\n\nexport default function Counter (){\n    const [count, dispatch] = useReducer(reducer, 0);\n\n    function increment(){\n        return dispatch({operator:PLUS});\n    }\n    function decrement(){\n        return dispatch({operator:MINUS})\n    }\n    return(\n    \u003cdiv className=\"container\"\u003e\n        \u003cdiv className=\"counter-div\"\u003e\n            \u003ch1 className=\"text-center pt-2 pb-3\"\u003e{count}\u003c/h1\u003e\n            \u003cdiv className=\"d-flex justify-content-center pt-5 btn-group\"\u003e\n                \u003cbutton onClick={decrement} className=\"btn btn-danger\"\u003eDecrease by 1\u003c/button\u003e\n                \u003cbutton onClick={increment} className=\"btn btn-success\"\u003eIncrease by 1\u003c/button\u003e                \n            \u003c/div\u003e\n        \u003c/div\u003e       \n    \u003c/div\u003e\n    );\n}\n```\n\n## Login code\n```\nimport React, { useReducer } from 'react';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport '../App.css';\nimport  userAccess from './users.component';\n\nfunction loginReducer(state, action) {\n  switch (action.type) {\n    case 'field': {return {\n        ...state, [action.fieldName]: action.value,\n      };\n    }\n    case 'login': {return {\n        ...state, isLoading: true, isLoggedIn:false, error:\"\"\n      };\n    }\n    case 'success': {return {\n        ...state, isLoading: false, isLoggedIn:true, error:\"\"\n      }; \n    }\n    case 'error': { return {\n        ...state, isLoggedIn: false, isLoading: false, error: 'Invalid username or password!',\n        username: \"\", password: \"\"\n      };\n    }\n    case 'logout': { return {\n        ...state, username:\"\", password:\"\", isLoading:false, isLoggedIn: false, error:\"\"\n      };\n    }\n    default: \n      return state;\n  }\n}\n\nconst initialState = {username: \"\", password: \"\", error:\"\", isLoading: false, isLoggedIn: false }; \n\nexport default function LoginUseReducer() {\n  const [state, dispatch] = useReducer(loginReducer, initialState);\n  const { username, password, error, isLoading, isLoggedIn } = state;\n\n  function onChangeUsername(e){\n      dispatch({type: 'field', fieldName: 'username', value: e.target.value})\n  };\n\n  function onChangePassword(e){\n      dispatch({type: 'field', fieldName: 'password', value: e.target.value})\n  };\n  function onClickLogout(e){\n      dispatch({type:'logout'})      \n  };\n\n  const onSubmitLoginInfo = async (e) =\u003e {\n    e.preventDefault();\n\n    dispatch({ type: 'login' });\n\n    try {\n      await userAccess({ username, password });\n      dispatch({ type: 'success' });      \n    } catch (error) {\n      dispatch({ type: 'error' });\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv className=\"container\"\u003e\n        {isLoggedIn ? (\n            \u003cdiv\u003e\n                \u003ch4 className=\"text-center\"\u003eWelcome {username}!\u003c/h4\u003e\n                \u003cbutton onClick={onClickLogout} className=\"btn btn-warning float-right\"\u003eLogout\u003c/button\u003e\n            \u003c/div\u003e ) : ( \n            \u003cdiv className=\"login-container shadow\"\u003e\n                \u003cform onSubmit={onSubmitLoginInfo}\u003e                    \n                    \u003cp className=\"text-center\"\u003eLogin\u003c/p\u003e\n                    {error \u0026\u0026 \u003cp className=\"text-center text-danger\"\u003e{error}\u003c/p\u003e}\n                    \u003cdiv className=\"login-form-content\"\u003e\n                        \u003cinput type=\"text\" placeholder=\"username / admin\" value={username} onChange={onChangeUsername} className=\"form-control\" required/\u003e\n                        \u003cinput type=\"password\" placeholder=\"password / 12345678\" value={password} onChange={onChangePassword} className=\"form-control\" required/\u003e\n                    \n                        \u003cbutton type=\"submit\" className=\"btn btn-primary form-control\" disabled={isLoading}\u003e\n                        {isLoading ? \"Logging in...\" : \"Login\"}\n                    \u003c/button\u003e\n                    \u003c/div\u003e\n                \u003c/form\u003e\n            \u003c/div\u003e\n        )}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferabossid%2Freact-usereducer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferabossid%2Freact-usereducer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferabossid%2Freact-usereducer/lists"}