React-Reduxを使用したGame of Life

Question

現在、私はBuilding Game of Life in FCCに取り組んでおり、これはReact-Reduxに関する私の知識をテストする素晴らしいプロジェクトだと思っていました。

私はReduxを初めて使用しているので、このプロジェクトではダムコンポーネントとスマートコンポーネントを理解するのが難しいです。私の見解では

が、これは私が見る方法です。

注：私は「ダムコンポーネント」対「Smartコンポーネント」を言うとき、私は単にそれがコンテナであることは、「Smartコンポーネント」であることを意味し、またはアプリの状態と結びついているものがあります。「ダムコンポーネント」とは単に、フィードされているものをレンダリングすることだけです。

私の前提が正しい場合は、セルに正しくアプリケーション状態を設定するのに苦労しています。

ここで私がこれまでに書かれたものです：私はよく分からない

コンポーネント/ board.js

import React, { Component } from 'react'; 
import Cell from '../containers/cell' 

export default class Board extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {height: 18, width: 40} 
    this.test = this.test.bind(this) 
    } 
    test(){ 
    console.log(this.state) 
    } 
    render(){ 
    let rows = []; 
    for (var i = 0; i < this.state.height; i++){ 
     let rowID = `row${i}` 
     let bin = [] 
     for (var idx = 0; idx < this.state.width; idx++){ 
     let cellID = `cell${i}-${idx}` 
     bin.push(<Cell key={cellID} id={cellID}/>) 
     } 
     rows.push(<tr key={i} id={rowID}>{bin}</tr>) 
    } 
    return(
     <div className="container"> 
     <div className="row"> 
      <div className="col s12 board"></div> 
      <table id="simple-board"> 
       <tbody> 
       {rows} 
       </tbody> 
      </table> 
      </div> 
     </div> 
    ) 
    } 
} 

コンテナ/ cell.js

import React, { Component } from 'react'; 

// import from '../actions/index'; 
// import { connect } from 'react-redux'; 
// import { bindActionCreators } from 'redux'; 


export default class Cell extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     color: 'dead' 
    }; 
    this.test = this.test.bind(this); 
    } 

    test(){ 
    this.state.color === 'dead' ? this.setState({color:'alive'}) : this.setState({color:'dead'}) 
    } 

    render(){ 
    return (
     <td 
     className={this.state.color} 
     key={this.props.cellID} 
     id={this.props.cellID} 
     onClick={this.test}> 
     </td> 
    ) 
    } 
} 

// function mapDispatchToProps(dispatch){ 
// return bindActionCreators({}, dispatch) 
// } 

// export default connect(null,mapDispatchToProps)() 

をどのように私はこの時点でアプローチすることができます。最初は、配列内のすべてのセルをラップする必要があると思ったが、それはアプリケーションの状態になるだろうが、私はそのことについてどのように進むべきかはわかっていない。

ご回答いただければ幸いです。

Answer 1

このような階層を作成することをお勧めします。私はあなたが理解できるだけのようにJSONに似た構文としてコンポーネント階層を表現するつもりです：

App (smart) { 
    dispatchProps: { 
    ...gameControlActions, // gets passed into GameControls 
    onCellClick, // gets passed down to Board, and then to each Cell 
    } 
    stateProps: { 
    cells: [{ 
     id: # 
     status: 'dead', // or 'alive' 
    }], // gets passed down to Board, to render cells 
    ...generationData, // gets passed down to Generation 
    } 
} 
    // Children of App 
    GameControls (dumb) // start, clear, randomize 
    Board (dumb) 
    Cells (dumb) 
    Generation (dumb) 

あなたはセルをレンダリングするとき、あなたはこのようにそれらをレンダリングします：インサイド

<Cell key={cellID} id={cellID} status={status} onClick={this.props.onCellClick} /> 

render(){ 
    return (
    <td 
     className={this.props.status} 
     id={this.props.id} 
     onClick={this.props.onClick.bind(null, this.props.id)}> 
    </td> 
) 
} 

あなた：render関数は次のようになり、あなたが今stateを取り除くことができCellコンポーネントアクションは単純に次のようになります。

function onCellClick(cellId) { 
    return { 
    type: 'CELL_CLICK', 
    payload: cellId, 
    }; 
} 

それから（cellsの新しいコピーを返すように覚えている）あなたの細胞配列にそのセルのstatusを切り替えることによって、あなたの減速で、そのアクションを処理します。また、調整プロセスのスピードアップやshouldComponentUpdateの実装を行う場合は、必要に応じてCellコンポーネントをPureComponentに拡張する必要があります。

これが理にかなっていないか、質問がある場合は教えてください（私はあなたと思う）。