Redux middlewares: logger, api & persistence-storage

apiMiddleware.js

export default (client) => ({ dispatch }) => (next) => async (action) => {
  if (!action.types || 
      action.types.length !== 3 || 
      !action.method || 
      !action.data
     ) {
    return next(action)
  }
  
  const {
    types: [
      pending,
      success,
      failure
    ],
    method,
    data
  } = action
  
  dispatch({
    type: pending,
    data
  })
  
  try {
    const { data: responseData } = await apiClient.call(method, data)
    dispatch({
      type: success,
      responseData
    })
  } catch (error) {
    dispatch({
      type: failure,
      error
    })
  }
  
  return next(action)
}

loggerMiddleware.js

export default (logger) => ({ getState }) => (next) => (action) => {
  logger.log('prev state', getState())
  logger.log('action', action)
  const returnedValue = next(action)
  logger.log('next state', getState())
  return returnedValue
}

storageMiddleware.js

export default (storage) => ({ getState }) => (next) => async (action) => {
  try {
    await storage.setItem('state', getState())
  } catch (_) {}
  return next(action)
}

store.js

import { createStore, applyMiddleware } from 'redux'

import storage from '@storage'
import apiClient from '@apiClient'
import logger from '@logger'
import reducer from '@reducers'

import apiMiddleware from './apiMiddleware'
import storageMiddleware from './storageMiddleware'
import loggerMiddleware from './loggerMiddleware'

const store = createStore(
  reducer,
  applyMiddleware(
    loggerMiddleware(logger),
    apiMiddleware(apiClient),
    storageMiddleware(storage)
  )
)

export default store