Authentication duck example

authReducerExample.js

// I prefer to name export an object with the actionTypes and one with actionCreators because
// 1. It's easier to use bindActionCreators this way.
// 2. (but this is a matter of taste) if you name export every single actionType
//    and the app grows then it's a mess importing every single interested action type (for example in the root saga).
export const actionTypes = {
  AUTO_LOGIN: 'AUTH_AUTO_LOGIN',
  SIGNUP_REQUEST: 'AUTH/SIGNUP_REQUEST',
  SIGNUP_SUCCESS: 'AUTH/SIGNUP_SUCCESS',
  SIGNUP_FAILURE: 'AUTH/SIGNUP_FAILURE',
  LOGIN_REQUEST: 'AUTH/LOGIN_REQUEST',
  LOGIN_SUCCESS: 'AUTH/LOGIN_SUCCESS',
  LOGIN_FAILURE: 'AUTH/LOGIN_FAILURE',
  LOGOUT: 'AUTH/LOGOUT'
}

export const initialState = {
  user: null,
  isLoading: false,
  error: null
}

export default function reducer (state = initialState, action) {
  switch (action.type) {
    case actionTypes.SIGNUP_REQUEST:
    case actionTypes.LOGIN_REQUEST:
      return { ...state, isLoading: true }
    case actionTypes.SIGNUP_SUCCESS:
    case actionTypes.LOGIN_SUCCESS:
      return { ...state, isLoading: false, user: action.user }
    case actionTypes.SIGNUP_FAILURE:
    case actionTypes.LOGIN_FAILURE:
      return { ...state, isLoading: false, error: action.error }
    case actionTypes.LOGOUT:
      return { ...state, user: null }
    default:
      return state
  }
}

export const actionCreators = {
  autoLogin: () => ({ type: actionTypes.AUTO_LOGIN }),
  signup: (email, password) => ({ type: actionTypes.SIGNUP_REQUEST, email, password }),
  login: (email, password) => ({ type: actionTypes.LOGIN_REQUEST, email, password }),
  logout: () => ({ type: actionTypes.LOGOUT })
}

ContainerExample1.js

// ACTIONCREATORS USAGE EXAMPLE 1
// When the action needed are all in a single duck (in this case authReducer)
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actionCreators } from '../reducers/authReducer'

const mapStateToProps = (state, ownProps) => ({
  // blablabla
})

const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators(actionCreators, dispatch)
})

export class AuthScreen extends Component {
  // blablabla
}

export default connect(mapStateToProps, mapDispatchToProps)(AuthScreen)

ContainerExample2.js

// ACTIONCREATORS USAGE EXAMPLE 2
// When the action needed are in different ducks (authReducer and settingsReducer)
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actionCreators as authActionCreators } from '../reducers/authReducer'
import { actionCreators as settingsActionCreators } from '../reducers/settingsReducer'

const mapStateToProps = (state, ownProps) => ({
  // blablabla
})

const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators({ ...authActionCreators, ...settingsActionCreators }, dispatch)
})

export class AuthScreen extends Component {
  // blablabla
}

export default connect(mapStateToProps, mapDispatchToProps)(AuthScreen)

RootSagaExample.js

// ROOT SAGA EXAMPLE
import { takeEvery } from 'redux-saga'
import { actionTypes as authActionTypes } from '../reducers/authReducer'
import { actionTypes as settingsActionTypes } from '../reducers/settingsReducer'

import { autoLogin, login, logout, signup } from './authSagas'
import { initializeLanguage, setLanguage } from './settingsSagas'
import { showErrorAlert } from './uiSagas'

export default function* rootSaga () {
  yield [
    takeEvery(authActionTypes.AUTO_LOGIN, autoLogin),
    takeEvery(authActionTypes.SIGNUP_REQUEST, signup),
    takeEvery(authActionTypes.LOGIN_REQUEST, login),
    takeEvery(authActionTypes.LOGOUT, logout),

    takeEvery(settingsActionTypes.INITIALIZE_LANGUAGE, initializeLanguage),
    takeEvery(settingsActionTypes.SET_LANGUAGE, setLanguage),

    takeEvery(authActionTypes.LOGIN_FAILURE, showErrorAlert),
    takeEvery(authActionTypes.SIGNUP_FAILURE, showErrorAlert)
  ]
}