Closed
Description
I'm trying to make a login success/error flow but my main concern is where I can put this logic.
Currently I'm using actions -> reducer (switch case with action calling API) -> success/error on response triggering another action.
The problem with this approach is that the reducer is not working when I call the action from the API call.
am I missing something?
Reducer
import { LOGIN_ATTEMPT, LOGGED_FAILED, LOGGED_SUCCESSFULLY } from '../constants/LoginActionTypes';
import Immutable from 'immutable';
import LoginApiCall from '../utils/login-request';
const initialState = new Immutable.Map({
email: '',
password: '',
}).asMutable();
export default function user(state = initialState, action) {
switch (action.type) {
case LOGIN_ATTEMPT:
console.log(action.user);
LoginApiCall.login(action.user);
return state;
case LOGGED_FAILED:
console.log('failed from reducer');
return state;
case LOGGED_SUCCESSFULLY:
console.log('success', action);
console.log('success from reducer');
break;
default:
return state;
}
}actions
import { LOGIN_ATTEMPT, LOGGED_FAILED, LOGGED_SUCCESSFULLY } from '../constants/LoginActionTypes';
export function loginError(error) {
return dispatch => {
dispatch({ error, type: LOGGED_FAILED });
};
}
/*
* Should add the route like parameter in this method
*/
export function loginSuccess(response) {
return dispatch => {
dispatch({ response, type: LOGGED_SUCCESSFULLY });
// router.transitionTo('/dashboard'); // will fire CHANGE_ROUTE in its change handler
};
}
export function loginRequest(email, password) {
const user = {email: email, password: password};
return dispatch => {
dispatch({ user, type: LOGIN_ATTEMPT });
};
}API calls
// Use there fetch polyfill
// The main idea is create a helper in order to handle success/error status
import * as LoginActions from '../actions/LoginActions';
const LoginApiCall = {
login(userData) {
fetch('http://localhost/login', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: userData.email,
password: userData.password,
}),
})
.then(response => {
if (response.status >= 200 && response.status < 300) {
console.log(response);
LoginActions.loginSuccess(response);
} else {
const error = new Error(response.statusText);
error.response = response;
LoginActions.loginError();
throw error;
}
})
.catch(error => { console.log('request failed', error); });
},
};
export default LoginApiCall;