Reaks + redux'da bileşen verilerini ön yükleme için doğru yol

Question

Kullanılacak bir bileşen için API'dan verileri ön yükleme yönteminin doğru yolunu bilmiyorum.

Ben verileri işlemek gereken bir vatansız bileşeni yazdım:

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; 

Ve API verileri Retreive edecek bir eylem vardır:

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

Şimdi ben birkaç var Liste için gereken bölümleri ön yükleme seçenekleri. Verilerin yüklenememesi için redux-thunk ve mapDispatchToProps ve mapDispatchToProps kullanabilir ve veri yüklemek için componentWillMount veya benzeri yaşam döngüsü yöntemini uygulayabilirim - ancak bileşen her zaman kendisi için veri yükleyeceğinden, listeyi sahne aracılığıyla geçmem gerekir ve Bunu istemiyorum, çünkü yeni bir bileşen oluşturulduğunda, veri depo yerine api'den getirilir ...

Gördüğüm başka bir tavsiye, tepki veren yönlendiriciden getComponent işlevini kullanmak ve tüm verileri geri almaktır. Bununla birlikte, bileşeni geri göndermeden önce, doğru redux yolu olup olmadığından emin değilim, çünkü burada redux-thunk'u nasıl kullanacağımı görmüyorum, ve mantıksal bir çeşit, tüm dosyaları bir araya getirdiğinde, sadece veri için gerekli olduğunda bir bileşen.

Bu, kapsayıcı bileşeninin yaşam döngüsü yöntemlerine veri yüklemek için yalnızca görünen tek seçenekle beni terk ediyor, ancak ne yapmak istediğimin en iyi uygulamasının ne olduğunu bilmek istiyorum.

Answer 1

Verilerin ön yüklemesini gerçekleştirmenin en 'redux benzeri' yolu, uygulamanızı tamamlayan bir Yüksek Düzey Bileşen'in yaşam döngüsü yöntemindeki (muhtemelen componentWillMount) eşzamansız eylemi tetiklemektir. Bununla birlikte, API çağrısının sonuçlarını doğrudan bu bileşende kullanmazsınız. Bunun, uygulama mağazanıza yerleştiren bir redüktörle ele alınması gerekir. Bu, eşzamansız eylemi işlemek için bir tür thunk middleware kullanmanız gerekecektir. Daha sonra, verileri ileten bileşene aktarmak için mapStateToProps kullanırsınız.

Yüksek mertebeden Bileşen:

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

regülatörleri:

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