React-redux environment

actions_clients.js

/* src/actions/clients.js */

import * as types from '../constants/chats'
import callApi from '../utils/call-api'

export function fetchAllClients() {
  return (dispatch) => {

    dispatch({
      type: types.FETCH_ALL_CHATS_REQUEST,
    })

    return callApi('/clients')
      .then(data => dispatch({
        type: types.FETCH_ALL_CHATS_SUCCESS,
        payload: data,
      }))
      .catch(reason => dispatch({
        type: types.FETCH_ALL_CHATS_FAILURE,
        payload: reason,
      }))
  }
}

actions_index.js

/* src/actions/index.js */

export * from './clients'

constants_clients.js

/* src/constants/clients.js */

export const FETCH_ALL_CLIENTS_REQUEST = Symbol('clients/FETCH_ALL_CLIENTS_REQUEST')
export const FETCH_ALL_CLIENTS_SUCCESS = Symbol('clients/FETCH_ALL_CLIENTS_SUCCESS')
export const FETCH_ALL_CLIENTS_FAILURE = Symbol('clients/FETCH_ALL_CLIENTS_FAILURE')

constants_index.js

/* src/constants/index.js */

export * from './clients'

reducers_clients.js

/* src/reducers/clients.js */

import { combineReducers } from 'redux'
import * as types from '../constants'

const initialState = {
  allClients: [],
}

const getAllClients = (state = initialState.activeId, action) => {
  switch (action.type) {
    case types.FETCH_ALL_CLIENTS_SUCCESS:
      return action.payload.clients
    default:
      return state
  }
}

export default combineReducers({
  getAllClients,
})

reducers_index.js

/* src/reducers/index.js */

import { combineReducers } from 'redux'
import auth from './clients'

export default combineReducers({
  clients,
})

store.js

/* src/store.js */

import { createStore, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
import loggerMiddleware from 'redux-logger'
import rootReducer from '../reducers'

export default function configureStore() {
  if (process.env.NODE_ENV === 'production') {
    return createStore(rootReducer, applyMiddleware(thunkMiddleware))
  }

  /* eslint-disable no-underscore-dangle */
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ serialize: true })
    : compose
  /* eslint-enable no-underscore-dangle */

  const store = createStore(
    rootReducer,
    composeEnhancers(applyMiddleware(thunkMiddleware, loggerMiddleware)),
  )

  if (module.hot) {
    module.hot.accept('../reducers', () => {
      store.replaceReducer(rootReducer)
    })
  }

  return store
}

utils_call-api.js

/* src/utils/call-api.js */
import fetch from 'isomorphic-fetch'
import config from '../config'

export default function callApi(endpoint, token, options, payload) {
  const authHeaders = token
    ? {
      Authorization: `Bearer ${token}`,
    }
    : {}

  return fetch(`${config.API_URI}${endpoint}`, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      ...authHeaders,
    },
    body: JSON.stringify(payload),
    ...options,
  })
    .then(response => response.json())
    .then((json) => {
      if (json.success) {
        return json
      }

      throw new Error(json.message)
    })
}