Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erabossid/react-usereducer
https://github.com/erabossid/react-usereducer
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/erabossid/react-usereducer
- Owner: erabossid
- Created: 2020-09-19T05:20:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-24T16:16:48.000Z (over 4 years ago)
- Last Synced: 2024-11-15T01:44:24.609Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://thetradecoder.github.io/react-usereducer/
- Size: 2.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Hooks - useReducer
## counter app code
```
import React, {useReducer} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../App.css';
const PLUS ="PLUS";
const MINUS = "MINUS";
function reducer(state, action){
switch(action.operator){
case PLUS:
return state + 1;
case MINUS:
return state<=0?0:state-1;
default:
return state;
}
}
export default function Counter (){
const [count, dispatch] = useReducer(reducer, 0);
function increment(){
return dispatch({operator:PLUS});
}
function decrement(){
return dispatch({operator:MINUS})
}
return(
{count}
Decrease by 1
Increase by 1
);
}
```
## Login code
```
import React, { useReducer } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../App.css';
import userAccess from './users.component';
function loginReducer(state, action) {
switch (action.type) {
case 'field': {return {
...state, [action.fieldName]: action.value,
};
}
case 'login': {return {
...state, isLoading: true, isLoggedIn:false, error:""
};
}
case 'success': {return {
...state, isLoading: false, isLoggedIn:true, error:""
};
}
case 'error': { return {
...state, isLoggedIn: false, isLoading: false, error: 'Invalid username or password!',
username: "", password: ""
};
}
case 'logout': { return {
...state, username:"", password:"", isLoading:false, isLoggedIn: false, error:""
};
}
default:
return state;
}
}
const initialState = {username: "", password: "", error:"", isLoading: false, isLoggedIn: false };
export default function LoginUseReducer() {
const [state, dispatch] = useReducer(loginReducer, initialState);
const { username, password, error, isLoading, isLoggedIn } = state;
function onChangeUsername(e){
dispatch({type: 'field', fieldName: 'username', value: e.target.value})
};
function onChangePassword(e){
dispatch({type: 'field', fieldName: 'password', value: e.target.value})
};
function onClickLogout(e){
dispatch({type:'logout'})
};
const onSubmitLoginInfo = async (e) => {
e.preventDefault();
dispatch({ type: 'login' });
try {
await userAccess({ username, password });
dispatch({ type: 'success' });
} catch (error) {
dispatch({ type: 'error' });
}
};
return (
{isLoggedIn ? (
Welcome {username}!
Logout
) : (
Login
{error && {error}
}
{isLoading ? "Logging in..." : "Login"}
)}
);
}
```