syncing-lines-array-to-server.js

const handleDrawingEvent = line => ({
  line,
  type: 'LINE_DRAWN'
})

const drawingSyncSuccess = () =>  ({
  type: 'DRAWING_SYNC_SUCCESS',
})

const drawingSyncFailure = () => ({
  type: 'DRAWING_SYNC_FAILED',
})

const drawingMouseUp = () => {
  return (dispatch, getState) => {
    return fetch('/a/fake/url', {
      method: 'post',
      body: JSON.stringify(getState().lines)
    })
    .then(response => {
      if (response.ok) {
        return dispatch(drawingSyncSuccess());
      }
  
      dispatch(drawingSyncFailure())
    })
    .catch(err => dispatch(drawingSyncFailure()))
  }
}

const defaultState = { lines: [] };

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'LINE_DRAWN': 
      return { ...state, lines: [...state.lines, action.line] }
    case 'DRAWING_SYNC_SUCCESS':
      return { ...state, lines: [], drawingSyncSuccess: true, drawingSyncFailed: false }
    case 'DRAWING_SYNC_FAILED':
      return { ...state, drawingSyncFailed: true, drawingSyncSuccess: false }
    default:
      return state;
  }
}