Thinkster
React
JWT Authentication with React & Redux

Wiring up the Authentication Reducer

Next up is the auth reducer. Remember there's 2 actions we need to handle from the login component, 'LOGIN' and 'UPDATE_FIELD_AUTH', plus we need to set the 'inProgress' field when there's a request in progress. Let's write separate handlers for each of these actions.

Update the auth reducer
export default (state = {}, action) => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        inProgress: false,
        errors: action.error ? action.payload.errors : null
      };
    case 'ASYNC_START':
      if (action.subtype === 'LOGIN' || action.subtype === 'REGISTER') {
        return { ...state, inProgress: true };
      }
      break;
    case 'UPDATE_FIELD_AUTH':
      return { ...state, [action.key]: action.value };
  }

  return state;
};

Let's also change the promise middleware to dispatch an 'ASYNC_START' action when an async action starts:

Update the promise middleware
const promiseMiddleware = store => next => action => {
  if (isPromise(action.payload)) {
    store.dispatch({ type: 'ASYNC_START', subtype: action.type });
    action.payload.then(
      // ...
    );

    return;
  }

  next(action);
};

// ...

Great, now you can actually submit a login request and, if the password is incorrect, you get an error. However, when you enter in the right password, nothing happens.