2016-09-06 32 views
6

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

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.

cevap

10

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; 
    } 
} 
+0

Bu eski bir sorudur farkındayım ama birileri hala cevap verecektir umarım. Bu benim sorunumun çözümü gibi görünüyor, ama açıkçası hala yanlış bir şeyler yapıyorum. this.props.getDepartments(); benim için atar ve hata verir. Bunun bir işlev olmadığını söylüyor. Tepki vermek için yeniyim, tepki-redux ve bunu nasıl çözeceğimi bilmiyorum. Herhangi bir yardım takdir edilecektir. –

+0

İşlevi mapDispatchToProps içinde bağladığınızdan emin olun ve yeniden mağazaya bağlı olun. Dürüst olmak gerekirse, yazdığınız koda bakmadan söylemek zor ... –

İlgili konular