react + reduxでコンポーネントデータを事前ロードする正しい方法

Question

コンポーネントから使用するコンポーネントのデータをプリロードする正しい方法がわかりません。

私はデータをレンダリングする必要がありますステートレスなコンポーネント書かれています：

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からデータを盗んするアクションを持っている：

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からフェッチされるので、私はそれを望んでいません...

私が見たもう一つのアドバイスは、react-routerのgetComponent関数を使用して、しかし、コンポーネントを返す前に、私はそれが正しいredux方法であるかどうかわからない、私はそこにredux-thunkを使用する方法を見ていないと、論理的な種類のすべてのファイルを横領しているようだ、 1つのコンポーネント。

これは、コンテナコンポーネントのライフサイクルメソッドにデータをロードするための一見okですが、私は何をしたいのかというベストプラクティスと考えています。

Answer 1

データのプリロードを処理する最も「還元的」な方法は、アプリケーションをラップする高次コンポーネントのライフサイクルメソッド（おそらくcomponentWillMount）の非同期アクションをオフにすることです。ただし、そのコンポーネントで直接API呼び出しの結果を使用することはありません。アプリストアに配置するレデューサーで処理する必要があります。これには、非同期アクションを処理するために何らかのサンド・ミドルウェアを使用する必要があります。次に、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; 
    } 
}