PropTypes位置的Redux最佳實踐

想知道將propType定義放入具有所有道具邏輯的容器中，還是將實際使用道具的主持人放置在容器中會更好。我可以看到兩者的論點。PropTypes位置的Redux最佳實踐

在容器中，您可以在同一個地方跟蹤所有道具邏輯，而演示者確認它們將被正確使用。

感謝您的意見。

更新爲清楚起見

例如-container.js

import PropTypes from 'prop-types'; 
import { connect } from 'react-redux'; 

import ButtonPresenter from './some/file'; 

const mapStateToProps = (store, props) => { 
    return ({ 
    example: Number(5), 
    }); 
}; 

const mapDispatchToProps = (dispatch, props) => ({ 
    onClick: id => { console.log(id) }, 
}); 

ButtonPresenter.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    example: PropTypes.number.isRequired, 
} 

const ButtonContainer = connect(mapStateToProps, mapDispatchToProps)(BoxPresenter); 

export default ButtonContainer;

利弊

所有邏輯是在1個位置

2不同的容器可以用一個演示者的工作

缺點

演示者可能需要不僅由容器陣列在地圖已知

寫入1

propTypes例如-presenter.js

import React from 'react'; 
import PropTypes from 'prop-types'; 

const ButtonPresenter = ({example, onClick}) => { 
    return (
    <button onClick={onClick}>{example}</button> 
); 
}; 

ButtonPresenter.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    example: PropTypes.number.isRequired, 
} 

export default ButtonPresenter;

利弊型所有使用主持人的地方

利弊

不是flexable，propTypes可以被看作是邏輯則邏輯在兩個容器中，主持人

來源

2017-09-25 user3243555

我沒有看到你的問題終極版和PropTypes之間的關係。

無論如何，我會在任何React組件上指定PropTypes，這些組件可能會被重用/消耗。它沒有意義的，我做的

這可能是基於意見被綁定到店裏最高的部件，雖然

[編輯：]
我可能失去了一些東西，但據我所知只有根組件（層次上更高）應該綁定到商店。因此，我不知道你將如何在其他地方使用它，並因此將屬性傳遞給它。總結一下，只有第二個片段對我有意義，組件的API自身包含在文件中，使合同清晰。 eiffel.com/values/design-by-contract

來源

2017-09-25 18:54:33

我添加了redux，因爲練習組件在連接函數的容器和演示文件之間被拆分，儘管我猜他們可以在不使用redux的情況下以這種方式拆分。我同意這可能是意見的問題，但我試圖看看「社區」傾向於哪種方式 – user3243555

我可能會錯過某些東西，但只有根組件（層次結構中的較高層）應該綁定到商店。因此，我不知道你將如何在其他地方使用它，並因此將屬性傳遞給它。總結一下，只有第二個片段對我來說很合理，組件的API自身包含在文件中，使_contract_清晰。 https://www.eiffel.com/values/design-by-contract/ –

PropTypes位置的Redux最佳實踐

回答

相關問題