Cách thực hành tốt nhất để tính toán có thể tái sử dụng trên dữ liệu trong kho lưu trữ redux

Question

Tôi vừa hoàn tất việc kết nối một ứng dụng redux và thật tuyệt vời cho đến nay. Tuy nhiên, vì trạng thái được lưu trữ trong một cửa hàng khổng lồ, bạn không có bất kỳ mô hình nào mà bạn đang truy cập dữ liệu của mình.

Giả sử tôi có một lớp mô hình lưu trữ một số thông tin về người dùng. Tôi thường thêm một hàm vào lớp được gọi là display_name kết hợp các phần khác nhau của tên của chúng một cách thông minh. Với điều đó, quan điểm khác nhau của tôi chỉ đơn giản có thể gọi display_name thay vì họ cần phải biết làm thế nào để tính toán nó.

Redux nói rõ ràng là không lưu trữ các giá trị được tính toán ở trạng thái, sao cho nó được xác định trong các thành phần. Điều này có thể không có thể được quyền mặc dù, bởi vì sau đó bạn muốn kết thúc sao chép mã này trong mọi thành phần cần nó.

Vị trí thích hợp để lưu trữ logic này ở đâu?

Answer 1

Phương pháp đơn giản nhất là để tạo ra các chức năng tiện ích để tính toán dữ liệu này và đặt chúng trong một module riêng biệt mà có thể được sử dụng bởi mapStateToProps chức năng nhiều thành phần. Một siêu đơn giản ví dụ:

import { displayName } from "./utils"; 

function mapStateToProps(state) { 
    return { 
    displayName: displayName(state.user) 
    }; 
} 

function MyComponent(props) { 
    return <div>Name: {props.displayName}</div>; 
} 

export default connect(mapStateToProps)(MyComponent); 

Answer 2

mỗi trang Computing Derived Data trong tài liệu Redux, cách tiếp cận đề nghị được sử dụng thư viện Reselect để xử lý lựa chọn và memoization.

Nếu bạn tìm kiếm Github cho các dự án Javascript có chứa thuật ngữ "createSelector", bạn sẽ tìm thấy một số ứng dụng thực tế đang sử dụng Chọn lại theo nhiều cách khác nhau. Dưới đây là ba điều tôi đã bật lên: jfurrow/flood, FH-Potsdam/shifted maps và madou/GW2 Armory