Prawidłowy sposób wstępnego ładowania danych komponentów w trybie reakcji + redux

Question

Nie wiem, w jaki sposób wstępnie załadować dane z API dla komponentu.

Napisałem bezstanową składnik, który powinien uczynić dane:

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; 

I mam działanie, które będzie retreive dane z API:

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); 
    }; 
} 

Teraz myślę, że mam kilka opcje wstępnego ładowania działów wymaganych dla tej listy. Mogę użyć redux-thunk i mapDispatchToProps do wstrzyknięcia fetchDepartments do elementu bezstanowego i zaimplementować componentWillMount lub podobną metodę cyklu życia, aby załadować dane - ale wtedy nie muszę przekazywać listy przez rekwizyty, ponieważ komponent zawsze ładowałby dane dla siebie, oraz Nie chcę tego, ponieważ za każdym razem, gdy tworzony jest nowy komponent, dane są pobierane z api, a nie ze sklepu ...

Kolejna porada, którą widziałem, to użycie funkcji getComponent z routera reagującego i odzyskanie wszystkich danych przed zwróceniem komponentu nie jestem jednak pewien, czy jest to poprawny sposób redux, ponieważ nie widzę sposobu użycia redux-thunk tam, a rodzaj logiki wydaje się zaśmiecony wszystkim pośród plików, gdy są to dane wymagane tylko dla jeden składnik.

To pozostawia mi jedyną możliwą opcję ładowania danych w metodach cyklu życia komponentu kontenera, ale chcę wiedzieć, co jest uważane za najlepszą praktykę dla tego, co chcę zrobić.

Answer 1

Najbardziej "redukującym" sposobem obsługi wstępnego ładowania danych byłoby odpalenie akcji asynchronicznej w metodzie cyklu życia (prawdopodobnie componentWillMount) komponentu wyższego rzędu, który otoczy Twoją aplikację. Jednak nie wykorzystasz wyników wywołania API bezpośrednio w tym komponencie - należy go obsługiwać za pomocą reduktora, który umieszcza go w sklepie z aplikacjami. Będzie to wymagało użycia pewnego rodzaju pośredniczącego oprogramowania pośredniczącego do obsługi asynchronicznej akcji. Następnie użyjesz mapStateToProps, aby po prostu przekazać go do komponentu, który renderuje dane.

wyższego rzędu Składnik:

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); 

reduktory:

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