phần Dumb không có nghĩa là nó có thể làm bất cứ điều gì giống như lấy thông tin cập nhật, nó có nghĩa là nó 'câm' đến khái niệm về redux và không biết gì về cửa hàng của bạn hoặc thư viện bạn đang sử dụng. Lợi ích là bạn có thể thay đổi việc thực hiện thông lượng của mình và bạn chỉ có một chút công việc để cập nhật các thành phần thông minh.
Đối với loại kịch bản bạn mô tả, bạn sẽ cung cấp cho <Menu> một chức năng thông qua các đạo cụ sẽ chạy khi <Menu> muốn cập nhật dữ liệu. <Menu> không biết gì về Redux - nó chỉ thực hiện một chức năng - nhưng nó vẫn có thể tìm nạp dữ liệu mới. Tùy thuộc vào sự phức tạp, bạn có thể chuyển qua trình tạo hành động thô (ràng buộc với dispatchAction) và chạy nó.
import * as dataActions from './actions';
// We have dataActions.fetchItems() which is the action creater to get new items.
// Attach items, and the action creator (bound to dispatch) to props
@connect((store) => {
return {items: store.data.items}
}, dataActions)
class ItemsPage extends Component {
static propTypes = {
items: PropTypes.object, // the items from the store, from @connect
fetchItems: PropTypes.func // action dispatcher, from @connect
}
render() {
return (<Menu onChange={this.props.fetchItems} />)
}
}
// Our 'dumb' component that doesnt know anything about Redux,
// but is still able to update data (via its smart parent)
class Menu extends Component {
static propTypes = {
onChange: PropTypes.func // same as fetchItems
}
render() {
return (<button onClick={this.props.onChange}>Update items</button>);
}
}
Nguồn
2015-11-01 01:57:30