Normalizing JSON response from server before updating Redux state

Question

It's my preferred paradigm (and probably everyone's) that the server remains unopinionated about serializing its JSON response as it doesn't care which client is consuming it. Said another way, my django JSON payload is written in snake case as per standards. Before this can update the state in my Redux store the keys should be mapped to camel case as per Javascript standards. The python developers don't believe this is worth the effort, which he has a fair point but it just feels wrong not following convention.

How should this be handled??

Answer 1

What I usually have is a middleware that handles all my fetch requests, in there I can intercept the response and transform the keys to camelCase using Humps.

// fetchMiddleware.js
export default ({ dispatch, getState }) => next => (action) => {
  if (typeof action === 'function') {
    return action(dispatch, getState);
  }

  const { promise, types, ...rest } = action;

  // this middleware expects a promise object in the action,
  // the object contains all configurations to send the request to
  // the server, if no promise is defined then it just ignores this action
  if (!promise) {
    return next(action);
  }

  return fetch(promise.url, promise)
    .then(response => Promise.resolve(humps.camelizeKeys(response)))
    .then(data => dispatch({ type: types[1], data }))
    .catch(error => dispatch({ type: types[2], error }));
}

Then in some component or anywhere else, the action will be dispatched like this:

store.dispatch({
  types: ['BEFORE_REQUEST', 'REQUEST_SUCCESS', 'REQUEST_FAIL'],
  promise: {
    url: 'some/api.json',
    params: { x, y },
  },
});

I usually have an utility to handle the fetch, but this will give you the idea on how to deal with camelCase transforming.