正確的方式來預加載組件數據做出反應+終極版

Question

我不知道從API預加載數據的組件使用的正確方法。

我寫這應該呈現數據的無狀態組件：

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; 

而且我有一個行動，這將從API retreive數據：

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

我想我現在有幾個預加載列表所需的部門的選項。我可以用redux-thunk和mapDispatchToProps注入fetchDepartments的無狀態組件和實施componentWillMount或類似的生命週期方法，加載數據 - 但是我並不需要通過道具通過的名單，作爲組件總是加載數據不爲己，我不希望這樣，因爲每當創建一個新組件時，數據都是從api中獲取的，而不是存儲的...

我見過的另一個建議是使用getComponent函數從react-router獲取，並且檢索所有數據然而，在返回組件之前，我不確定它是否是正確的redux方法，因爲我沒有看到如何使用redux-thunk，並且邏輯類似於散佈在文件中的所有文件，當它是僅需要的數據時一個組件。

這讓我看到了在容器組件的生命週期方法中加載數據的唯一看似正常的選項，但我想知道什麼是我想要做的最佳實踐。

Answer 1

處理數據預加載的最「類似類似」的方法是在包裝應用程序的高階組件的生命週期方法（可能爲componentWillMount）中觸發異步操作。但是，您不會直接在該組件中使用API​​調用的結果 - 它需要使用將其放入應用商店的Reducer進行處理。這將要求您使用某種thunk中間件來處理異步操作。然後，您將使用mapStateToProps將其簡單地傳遞給呈現數據的組件。

高階組件：

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

減速器：

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