Cách chính xác để tải trước dữ liệu thành phần theo phản ứng + redux

Question

Tôi không biết cách chính xác để tải trước dữ liệu từ API cho một thành phần để sử dụng.

Tôi đã viết một thành phần không quốc tịch mà nên làm cho dữ liệu:

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; 

Và tôi có một hành động mà sẽ truy xuất dữ liệu từ 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); 
    }; 
} 

Bây giờ tôi nghĩ rằng tôi có một vài tùy chọn để tải trước các bộ phận được yêu cầu cho danh sách. Tôi có thể sử dụng redux-thunk và mapDispatchToProps để nạp fetchDepartments vào thành phần không trạng thái và thực hiện componentWillMount hoặc phương pháp vòng đời tương tự, để tải dữ liệu - nhưng sau đó tôi không cần phải chuyển danh sách qua đạo cụ, vì thành phần sẽ luôn tải dữ liệu cho chính mình và Tôi không muốn điều đó, bởi vì bất cứ khi nào một thành phần mới được tạo ra, dữ liệu được lấy từ api thay vì lưu trữ ...

Một lời khuyên khác mà tôi đã thấy là sử dụng chức năng getComponent từ bộ phản ứng và truy xuất tất cả dữ liệu Tuy nhiên, trước khi trả về thành phần, tôi không chắc đó có phải là cách redux chính xác hay không, vì tôi không thấy cách sử dụng redux-thunk ở đó, và loại logic có vẻ phân tán tất cả các tập tin, khi đó chỉ là dữ liệu cần thiết một thành phần.

Điều này khiến tôi chỉ có tùy chọn tải dữ liệu trong các phương pháp vòng đời của thành phần container, nhưng tôi muốn biết điều gì được coi là thực hành tốt nhất cho những gì tôi muốn làm.

Answer 1

Cách 'xử lý dữ liệu' giống nhất để xử lý việc tải trước dữ liệu sẽ là kích hoạt hành động không đồng bộ trong phương pháp vòng đời (có thể là componentWillMount) của Thành phần đặt hàng cao hơn kết thúc tốt đẹp ứng dụng của bạn. Tuy nhiên, bạn sẽ không sử dụng kết quả của cuộc gọi API trực tiếp trong thành phần đó - nó cần phải được xử lý bằng bộ giảm tốc đặt nó vào cửa hàng ứng dụng của bạn. Điều này sẽ yêu cầu bạn sử dụng một số loại phần mềm trung gian để xử lý hành động không đồng bộ. Sau đó, bạn sẽ sử dụng mapStateToProps để chỉ cần chuyển nó xuống thành phần hiển thị dữ liệu.

cao hơn theo thứ tự Component:

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

gia giảm:

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