In React/Redux, wie Daten nach JSON API Struktur

Question

Ich habe ein Formular in React erstellt und ich habe eine API, die eine JSON-API-Struktur hat, d.h. mit der Antwort innerhalb der data: [] Eigenschaft. Und ich verwende Axios und redux-thunk, um die Daten zu holen.

Die Daten aus dem Formular kommenden state hat diese Struktur:

{ 
    title: '', 
    phone: '', 
    email: '', 
    description: '' 
} 

Wie kann ich es konvertieren, damit es die JSON API Konvention folgt, mit axios, redux-thunk, action und reducer:

{ 
    data: [{ 
    title: '', 
    phone: '', 
    email: '', 
    description: '' 
    }] 
} 

Hier stecke ich fest:

Redu cer:

export default function roleReducer(state = [], action) { 
    switch(action.type) { 
    case types.SAVE_ROLE_SUCCESS: 
     return [ 
     ...state, 
     Object.assign({}, action.role) 
     ]; 

    default: 
     return state; 
    } 
} 

Aktionen:

export function saveRoleSuccess(role) { 
    return { 
    type: types.SAVE_ROLE_SUCCESS, 
    role, 
    }; 
} 

Thunk:

export function saveRole(role) { 
    return (dispatch, getState) => { 
    return axios.post(apiUrl, role) 
     .then(savedRole => { 
     console.log('Role: ', savedRole); 
     dispatch(saveRoleSuccess(savedRole)); 
     console.log('Get state: ', getState()); 
     }) 
     .catch(error => { 
     if (error) { 
      console.log('Oops! Role not saved.', error); 
     } 
     }); 
    }; 
} 

Ich bin mir nicht sicher, wo und was für ein neue Daten in die JSON-Format zu tun API-Struktur

Answer 1

nicht 100% sicher, aber ich denke hier:

return axios.post(apiUrl) 

Sie sind tatsächlich keine Daten sendet. Ich denke, du willst es tun:

const dataToPost = { data: [ role ] }; //wrap the role in an array and an object 
return axios.post(apiUrl, dataToPost); //send the data