React/Redux - 在渲染之前按摩狀態是否安全

我正在使用React/Redux中的Tetris，使用Brandly's non-redux version作爲參考/提示並拉動一些實用程序。React/Redux - 在渲染之前按摩狀態是否安全

讓我們說我有一個商店（遊戲棋盤），由一個2D數組表示。這些值或者是假的或者是該類的名字（用於着色）。

此外，還有第二個商店代表將要播放的下一個作品（包括正在播放但尚未設置的當前作品）。

內負責渲染板組件，商店連接到道具像這樣：

const mapStateToProps = (state) => { 
    return { 
    Board: state.Board, 
    PieceList: state.PieceList 
    } 
}

我的渲染功能看起來像：

render() { 
    var piece = this.props.PieceList.currentPiece; 
    var newBoard = _.cloneDeep(this.props.Board); 
    pieceSetter(newBoard)(piece._piece.blocks[piece._rotation], piece._position, piece._piece.className); 
    return (
     <div className="board"> 
     {newBoard.map((x, i) => 
      <Row value={x} key={i}/> 
     )} 
     </div> 
    ) 
    }

凡pieceSetter是一個實用的功能添加件到董事會。

渲染方法是否適合做一些數據按摩來合併信息？在這個特定的例子中，它將「當前作品」添加到電路板上進行展示。

由於當前處理運動驗證功能的方式，我希望避免將當前棋子添加到棋盤上的商店（棋盤目前忽略「當前」運動驗證棋子並考慮棋子的位置，沒有「未放置的作品」的概念）

我是在創建反模式，還是可以認爲這是合適的？

來源

2017-05-10 Hodrobond

我認爲amageddian的回答是正確的 - 你想保持渲染方法純，並在mapStateToProps中做你的數據處理。我確實想要指出，在REDX中只有一家商店。你所說的商店（Board Store，Piece Store）實際上只是一個商店中的屬性，它們通過縮減器來更新以響應操作。 –

@realseanp我同意，我只是稍等片刻，然後再接受其他答案，以避免接受舞蹈。感謝您的單店評論，這是我在概念上理解的，但由於天真而錯誤表達，並會在未來嘗試使用正確的措辭=） – Hodrobond

最好將這種邏輯放在渲染函數之外。例如，您可能會將該代碼置於mapStateToProps之內，並將該功能修剪爲表示。

此外，不需要使用_.cloneDeep複製Board對象; React組件和容器在渲染鏈中不會改變商店中對象的狀態。

來源

2017-05-10 20:31:28 amageddian

React/Redux - 在渲染之前按摩狀態是否安全

回答

相關問題