Các thành phần thùng chứa phản ứng-redux tái sử dụng

Question

Trong ứng dụng React/Redux của tôi, tôi thường phải đối mặt với vấn đề triển khai các thành phần có trạng thái nên được sử dụng trong suốt ứng dụng. Hãy lấy thành phần bật lên đơn giản làm ví dụ với trạng thái mở/đóng có thể được sử dụng lại trong bất kỳ trang nào. Dưới đây là hai cách tiếp cận có thể tôi thấy:

• Sử dụng setState và "địa phương" giảm tốc (tôi sử dụng recompose.withReducer đó là đường chỉ cú pháp cho Phản ứng của mẹ đẻ setState) để quản lý trạng thái của nó. Nó trông dễ dàng và tái sử dụng cho đến khi bạn cần thay đổi trạng thái của thành phần trong phần khác của trang của bạn (đóng cửa sổ bật lên trong trường hợp xuất hiện). Và bạn không thể chỉ gọi một số hành động redux để thay đổi trạng thái.

• Giữ trạng thái của thành phần trong cửa hàng Redux. Với cách tiếp cận như vậy chúng ta có thể gọi closePopupAction({ id }) ở bất kỳ vị trí nào của cây thành phần để thay đổi trạng thái của nó.` Nhưng chúng ta cần bằng cách nào đó đặt bộ giảm tốc của nó (mà tôi muốn giữ trong thư mục của popup) vào bộ giảm gốc khi thành phần được gắn kết và xóa nó khi thành phần chưa được lắp. Thêm vào đó, chúng tôi có thể có nhiều cửa sổ bật lên trong trang và mỗi quảng cáo có trạng thái riêng.

Có ai phải đối mặt với vấn đề tương tự không?

Answer 1

Tôi nghĩ bạn nên giữ trạng thái của thành phần trong quá trình chuyển đổi. Bạn có thể tạo giảm tốc cho chức năng này thành phần và sử dụng combineReducers theo cách này:

rootReducer = combineReducers({ 
    moduleA: combineReducers({ 
     popupA: popupReducer("id1"), 
     popupB: popupReducer("id2") 
    }), 
    moduleB: combineReducers({ 
     popupA: popupReducer("id3") 
    }) 
    }) 
}); 

sau đó khi bạn gọi closePopupAction ("id1") giảm có thể kiểm tra id và thay đổi một phần thích hợp của nhà nước.

PS: Id cần được cung cấp theo cách tốt hơn :)

Answer 2

Bạn có thể gắn kết nhà nước của mỗi thành phần để lát riêng của cửa hàng.

Vì vậy closePopupAction hành động của bạn sẽ được gọi với điều đó gắn kết đường dẫn:

closePopupAction({ mountPath: 'popups.popup1' }) 

và bạn sẽ chỉ cần một giảm để xử lý tất cả closePopupAction hành động, mà có thể được đăng ký một lần lúc khởi động:

(state, { type, mountPath }) => { 
     if (type === 'CLOSE_POPUP_ACTION') { 
     // manipulate with the slice at `mountPath`, e.g. 
     return _.set(_.cloneDeep(state), `${mountPath}.isOpen`, false) 
     } 
     // ... 
    }