Unerwünschte geschachtelte Ebene in der Form des Reaktionszustands (im Umgang mit JSON)

Question

Ich fange gerade an, mit React \ Redux zu spielen (aber es gibt kein R \ R Problem). Ich versuche, einige Entitäten abzubilden, die von der Server-API kommen, aber wenn ich sie bekomme - sie sind automatisch in eine tiefere Array-Ebene eingepackt und ich kann sie nicht rausbekommen. Dies ist ein Code-Snippet. Ich denke, es ist nichts Ungewöhnliches:

import { getGroupList } from './actions/groupActions'; 

class GroupContainer extends Component { 
constructor (props){ 
    super(props); 
}; 


componentWillMount = function(){ 
    fetch('http://localhost:3000/groups.json') 
    .then((response) => { 
     return response.json() 
    }) 
    .then((json) => { 
     return json.groups; 
    }) 
    .then((result) => { 
     this.props.onGetGroupList(result); //call action 
    }) 
}; 

render() { 
    return (
     <div className="groups"> 
     { 
      this.props.groups.map((group, index) => 
      { 
      return <Link key={index} to={`/group/${index}`} > 
      <div id={index}><p>{group.name}</p></div></Link> 
      }) 
     } 
     </div> 
    ); 
    } 

} 

const mapStateToProps = (state) =>{ 
    return { 
    groups: state.groups 
    } 
}; 

const mapDispatchToProps = (dispatch) =>{ 
    return { 
    onGetGroupList: (items) => dispatch(getGroupList(items)) 
    } 
}; 


export default connect(mapStateToProps, mapDispatchToProps)(GroupContainer); 

//reducers/groups.js ... i combineReducers überspringen wird, Action Schöpfer - es gibt nichts interessantes

const initialState = []; 

export default function groups(state = initialState, action) { 
    switch (action.type) { 
    case 'GROUP_LIST_SUCCESS': 
    console.log(action); 
     return [ 
     ...state, 
     action.payload 
     ]; 

    default: 
     return state; 
    } 
} 

Meine groups.json Datei ist:

{ 
    "groups": [{ 
     "name": "FIRST GROUP" 
    }, 
    { 
     "name": "SECOND GROUP" 
    } 
    ] 
} 

In ReduxDevTools i siehe zusätzliche verschachtelte Ebene auf Gruppen Entitäten - "0":

Und deshalb Map-Funktion kann Gruppenelemente nicht iterieren. Wie Sie oben sehen können, habe ich noch einen weiteren Satz - "Unions" ohne zusätzliche Verschachtelung. Gewerkschaften setzt als initialState meiner anderen Komponente Reduzierung:

const initialState = [ 
    unions = { 
    name: 'Some name', 
    interval: '1-8.', 
    father: '0' 
    }, 
    { 
    name: 'Some other name', 
    interval: '1-11', 
    father: '0' 
    } 
    ..... 
]; 

export default function unions(state = initialState, action) {.....} 

Und ich habe keine Probleme mit Rendering-Komponenten. Also meine allgemeine Frage - was ist los mit JSON Parsing (oder was sonst)? Ich habe versucht, Axios stattdessen natives Holen zu verwenden - dasselbe Ergebnis. Ich habe versucht, zu JSON.parse ('{ "Gruppen": [{ "name": "FIRST GROUP" }, { "name": "zweiten Gruppe" } ] }') anstatt URL zu holen, ohne Glück. Ich bekomme immer eine tiefere verschachtelte Ebene in Form von Daten. Irgendwelche Hilfe, bitte.

hinzufügen später ... /action/groupActions.js /* * Aktion Schöpfer */

export function getGroupList(items) { 
    console.log('groups_action_creator:',items); 
    return { 
    type: 'GROUP_LIST_SUCCESS', 
    payload: items 
    } 
}; 

Answer 1

Gerade für die weitere Suche. Wenn ich mit dem einfachen Holen von api festgefahren wäre, würde es vielleicht jemand Zeit sparen. Die Sache war, wie ich im Push-Back-Neuzustand mit Payload entdecke. Als ich console.log ganze Reduziererrückkehr zurückhole, war ich in der Lage, innere redux Verpackung zu sehen: [].concat(_toConsumableArray(state), [action.payload]) Ich suchte redux Dokumente, aber fand keine Erklärungen des internen Entwurfs. Aber es zeigt mir, dass ich eine Lösung für mein Problem finde.

Schließlich modifizierte ich das Reduktions wie:

const initialState = []; 
export default function groups(state = initialState, action) { 
    switch (action.type) { 
    case 'GROUP_LIST_SUCCESS': 
    // make new object from state and payload. No mutations here 
    let newStateObject = Object.assign({}, state, action.payload); 
    // convert the shape of new state to array, so i can iterate it later with map function 
    let newStateArray = Array.from(Object.keys(newStateObject), k => newStateObject[k]); 
     return newStateArray; 
    default: 
     return state; 
    } 
}