Richtiger Weg zum Vorladen von Komponentendaten in react + redux

Question

Ich weiß nicht, wie man Daten aus der API vorladen kann, damit eine Komponente verwendet werden kann.

Ich habe eine stateless Komponente geschrieben, die die Daten darstellen soll:

import React, { PropTypes } from 'react'; 

const DepartmentsList = ({ departments }) => { 
    const listItems = departments.map((department) => (
    <li><a href="./{department}">{department.title}</a></li> 
)); 
    return (
    <ul> 
     {listItems} 
    </ul> 
); 
}; 

DepartmentsList.propTypes = { 
    departments: PropTypes.array.isRequired 
}; 

export default DepartmentsList; 

Und ich habe eine Aktion, die Daten aus der API retreive wird:

import { getDepartments } from '../api/timetable'; 

export const REQUEST_DEPARTMENTS = 'REQUEST_DEPARTMENTS'; 
export const RECEIVE_DEPARTMENTS = 'RECEIVE_DEPARTMENTS'; 

const requestDepartments =() => ({ type: REQUEST_DEPARTMENTS }); 
const receiveDepartments = (departments) => ({ type: RECEIVE_DEPARTMENTS, departments }); 

export function fetchDepartments() { 
    return dispatch => { 
    dispatch(requestDepartments); 
    getDepartments() 
     .then(departments => dispatch(
     receiveDepartments(departments) 
    )) 
     .catch(console.log); 
    }; 
} 

Jetzt denke ich, dass ich ein paar haben Optionen zum Vorladen von Abteilungen, die für die Liste benötigt werden. Ich könnte redux-thunk und mapDispatchToProps verwenden, fetchDepartments in die zustandslose Komponente zu injizieren und componentWillMount oder ähnliche Lebenszyklus-Methode zu implementieren, um Daten zu laden - aber dann muss ich die Liste nicht über Requisiten übergeben, da die Komponente immer Daten für sich selbst laden würde Ich will das nicht, denn wenn eine neue Komponente erstellt wird, werden die Daten von api geholt anstatt von store ...

Ein weiterer Rat, den ich gesehen habe, ist getComponent Funktion von React-Router zu verwenden, und alle Daten retreive Bevor ich die Komponente zurücksende, bin ich jedoch nicht sicher, ob es der richtige Redux-Weg ist, da ich nicht sehe, wie man Redux-Thunk dort verwendet, und Logik scheint irgendwie über die Dateien verstreut zu sein, wenn es nur für die Daten erforderlich ist eine Komponente.

Das lässt mich mit der nur scheinbar in Ordnung Option zum Laden von Daten in Containerlebenszyklus-Methoden, aber ich möchte wissen, was als die beste Vorgehensweise für das, was ich tun möchte.

Answer 1

Die "reduktivste" Art, das Vorladen von Daten zu handhaben, wäre das Auslösen der asynchronen Aktion in der Lebenszyklusmethode (wahrscheinlich componentWillMount) einer Higher Order Component, die Ihre App umschließt. Sie werden jedoch die Ergebnisse des API-Aufrufs nicht direkt in dieser Komponente verwenden. Sie muss mit einem Reduzierer verarbeitet werden, der sie in Ihren App Store einfügt. Dies erfordert, dass Sie eine Art Thunk-Middleware verwenden, um die asynchrone Aktion zu verarbeiten. Dann verwenden Sie mapStateToProps, um es einfach an die Komponente zu übergeben, die die Daten rendert.

höhere Ordnung Komponente:

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

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ 
    getDepartments: actionCreators.fetchDepartments 
    }); 
} 

class App extends Component { 
    componentWillMount() { 
    this.props.getDepartments(); 
    } 

    render() { 
    return <DepartmentsList departments={this.props.departments} /> 
    } 
} 

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

Minderer:

export function departments(state = [], action) { 
    switch(action.type) { 
    case 'RECEIVE_DEPARTMENTS': 
     return action.departments; 
    } 
}