Thiết kế giảm tốc Redux/thiết kế trạng thái cho các lát cắt phụ thuộc

Question

Tôi thích khái niệm thành phần giảm tốc trong Redux, nhưng đã chạy vào một tình huống mà tôi sẽ như để chia nhỏ bộ giảm tốc. về trạng thái-lát từ những người khác để thực hiện thay đổi của họ.

Ví dụ

Trong trạng thái của tôi, tôi cần phải theo dõi các nội dung sau:

• Một loạt các thể bậc (tức [ 2, 3, 4, 5, 6 ])
• Xếp hạng hiện chọn (một trong các giá trị trên).
• Tùy thuộc vào xếp hạng đã chọn, một phạm vi có thể là cấp đào tạo. Mối quan hệ là phạm vi đi từ [ 1 .. (selectedRank - 1) ]
• Một hiện đang được chọn đào tạo trình độ trong phạm vi trên

Ban đầu, tôi đã có một giảm lớn hơn đã tóm gọn tất cả các khía cạnh:

function rankAndTraining(state = { 
    selectedRank   : 4, 
    availableRanks   : [ 2, 3, 4, 5, 6 ], 
    availableTrainingLevels : [ 1, 2, 3 ], 
    selectedTrainingLevel : 2, 
}, action) { 
    . 
    . 
    . 
    case SELECT_RANK: 

     let newRank = action.rank; 

     if(!availableRanks.contains(newRank)) { 
     // If new rank is not an allowed value, do nothing. 
     return state; 
     } 

     // Update selectedRank with newRank... 

     // Update availableTrainingLevels array based on newRank... 
     // [ 1 ... (selectedRank - 1) ] 

     // Update selectedTrainingLevel if it is now out of range 
     // of availableTrainingLevel (i.e. set to highest value of new range) 

     return state; 
    . 
    . 
    . 
} 

Tôi muốn chia nhỏ bộ giảm tốc này, vì tôi cảm thấy rằng xếp hạng và các mức đào tạo có thể được duy trì ở các bộ giảm riêng biệt.

Tuy nhiên, có phụ thuộc trên các mảnh trạng thái đó vẫn sẽ cần phải được xử lý nếu giảm được chia, chẳng hạn như:

• Nếu xếp hạng mới là không hợp lệ (ví dụ: nó không phải là trong . availableRanks), sau đó các bit cấp đào tạo không nên được cập nhật.

Nếu tôi là để phân chia các bit trình độ đào tạo vào giảm tốc khác, sau đó họ sẽ không có cách nào để biết kết quả của việc này "rank kiểm tra", vì tất cả họ sẽ "nhìn thấy" trong nhà lát của họ là cấp độ đào tạo miếng.

Trong trường hợp này, trình giảm tốc ở trên có thực sự là "lát nhỏ nhất" của trạng thái mà tôi có thể nhận được không, với sự phụ thuộc giữa chúng? Hay là có cách nào tốt hơn để tách nó ra mà tôi có thể không nhìn thấy?

Answer 1

Nếu bạn sử dụng Redux thunk middleware bạn có thể kiểm tra toàn bộ tiểu bang đầu tiên trước khi bạn thực sự cử hành động của bạn ở tất cả thay vì cử hành động của bạn và sau đó có điều kiện cập nhật trạng thái của bạn trong giảm:

function selectRankIfAllowed() { 
    return (dispatch, getState) => { 
    const { availableRanks } = getState(); 

    if(!availableRanks.contains(newRank)) { 
     // If new rank is not an allowed value, do nothing. 
     return state; 
    } 

    dispatch(selectRank()); 
    }; 
} 

https://github.com/gaearon/redux-thunk