Different options for async or object-based reducers

user-reducers.js

const user = 'foo';

// option 1: actions first

const defaultState = {
  loading: false,
  error: null,
  properties: user
};

const option1 = handleActions(
  {
    [loading]: state => ({
      ...state,
      loading: true
    }),
    [success]: (state, {payload: token}) => ({
      ...state,
      loading: false,
      error: null,
      properties: userFromToken(token)
    }),
    [failure]: (state, {payload: error}) => ({
      ...state,
      loading: false,
      error
    }),
    [logOut]: () => ({
      ...defaultState,
      properties: null
    })
  },
  defaultState
);

// option 2: properties first

const option2 = combineReducers({
  loading: handleActions(
    {
      [loading]: () => true,
      [combineActions(success, failure)]: () => false
    },
    false
  ),
  error: handleActions(
    {
      [failure]: (state, {payload: error}) => error,
      [success]: () => null
    },
    null
  ),
  properties: handleActions(
    {
      [success]: (state, {payload: token}) => userFromToken(token),
      [logOut]: () => null
    },
    user
  )
});

// option 3: option 1 + option 2 🙀

const reducer = handleActions(
  {
    [setProperty]: (state, {payload}) => ({
      ...state,
      [payload.key]: payload.value
    }),
    [setProperties]: (state, {payload}) => ({
      ...state,
      ...payload
    })
  },
  {
    changed: null
  }
);

const option3 = combineReducers({
  ...reducer,
  changed: handleAction(
    combineActions(setProperty, setProperties),
    () => Date.now(),
    null
  )
});