Format date in Redux Reducer before it hits state
<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>