title: Format date in Redux Reducer before it hits state
body: <p>how can I format a date from a standard JS date object, which has come from the server and is fed into React via Redux through a REST api, which has an initial output of:</p>
  
  <pre><code>"2016-05-16T13:07:00.000Z"
  </code></pre>
  
  <p>Into a different format? So it is listed as <code>DD MM YYYY</code>?</p>
  
  <p>Can I do this in the Reducer of Action by manipulating the request result, or the payload:</p>
  
  <pre><code>import { FETCH_BOOKS, FETCH_BOOK } from '../actions';
  
  const INITIAL_STATE = { books: [], book: null };
  
  export default function(state = INITIAL_STATE, action) {
      switch(action.type) {
          case FETCH_BOOK:
              return { ...state, book: action.payload.data };
          case FETCH_BOOKS:
              return { ...state, books: action.payload.data };
      }
      return state;
  }
  </code></pre>
  
  <p>With action:</p>
  
  <pre><code>export function fetchBooks() {
      const request = axios.get('/api/books');
  
      return {
          type: FETCH_BOOKS,
          payload: request
      }
  }
  </code></pre>
  
  <p><code>fetchBooks()</code> is called in the <code>componentWillMount()</code> method of the Books React component:</p>
  
  <pre><code>componentWillMount() {
      this.props.fetchBooks();
  }
  </code></pre>
  
  <p>The api returns the following structured JSON:</p>
  
  <pre><code>[{"_id":0,"date":"2016-05-16T13:07:00.000Z","title":"Eloquent JavaScript","description":"Learn JavaScript"}]
  </code></pre>
  
  <h1>Update</h1>
  
  <p>Thank you very much Nicole and nrabinowitz - I have implemented the following changes... in the action creators </p>
  
  <pre><code>function transformDateFormat(json) {
      const book = {
          ...json,
          id: json.data._id,
          // date: new Date(moment(json.data.date).format('yyyy-MM-dd'))
          date: new Date(json.data.date)
      }
      console.log(book);
      return book;
  }
  
  export function fetchBook(id) {
      const request = axios.get(`/api/books/${id}`)
          .then(transformDateFormat);
  
      return {
          type: FETCH_BOOK,
          payload: request 
      }
  };
  </code></pre>
  
  <p>I am logging the book object in the transform date function, and it is adding <code>id</code> and <code>date</code> to the root of the object, but the structure of the json actually needs to be <code>book.data.id</code> and <code>book.data.date</code>. I'm not sure how to create the correct structure within the transformDate function to return to the action creator.</p>
  
  <p>This is the book object from the transform date function console log:</p>
  
  <pre><code>Object {data: Object, status: 200, statusText: "OK", headers: Object, config: Object…}
  config: Object
  data: Object
      __v:0
      _id: "5749f1e0c373602b0e000001"
      date: "2016-05-28T00:00:00.000Z"
      name:"Eloquent JavaScript"
      __proto__:Object
  date: Sat May 28 2016 01:00:00 GMT+0100 (BST)
  headers: Object
  id: "5749f1e0c373602b0e000001"
  request: XMLHttpRequest
  status: 200
  statusText: "OK"
  __proto__: Object
  </code></pre>
  
  <p>My function needs to place the id and date inside the data object. (The date is just standard date format as something is wrong with my implementation of moment (<code>date: new Date(moment(json.data.date).format('yyyy-MM-dd'))</code> returns <code>Invalid date</code>).</p>
  
  <p>Thanks again for all your help - really appreciated.</p>