React-Redux를 사용하여 Game of Life

Question

현재 저는 Building Game of Life in FCC으로 일하고 있습니다.이 도구는 React-Redux에 대한 지식을 테스트하는 훌륭한 프로젝트가 될 것이라고 생각했습니다.

저는 Redux에 익숙하지 않아이 프로젝트에서 멍청한 구성 요소와 똑똑한 구성 요소를 이해하는 데 어려움을 겪고 있습니다. 나는 대 "스마트 구성 요소"를 말할 때 "벙어리 구성 요소"나는 단순히이는 "스마트 구성 요소"그것은 컨테이너로 의미 :

참고 : 내보기에서

, 이것은 내가 볼 방법입니다 또는 앱의 상태와 관련있는 무언가, "덤 구성 요소"가 단순히 취업 중이라는 것을 렌더링하는 것임을 의미합니다.

제 가정이 맞다면 셀에 올바르게 앱 상태를 설정하는 데 어려움을 겪고 있습니다. 여기

내가 지금까지 쓴 내용은 다음과 같습니다/

구성 요소/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

이렇게 계층 구조를 만들 것을 제안합니다. 당신이 세포를 렌더링 할 때

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} /> 

내부를 당신이 이해할 수있는 단지 있도록 JSON과 같은 구문과 구성 요소 계층을 대표하는거야 Cell 구성 요소는 render 기능은 다음과 같을 것입니다 그리고 당신은 지금 state 제거 할 수 있습니다

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

귀하 onCellClick 조치는 단순히 다음과 같을 것이다 :

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

그런 다음 (cells의 새 복사본을 반환하는 기억) 당신의 세포 배열에 해당 셀의 status을 전환하여 감속기에서 해당 작업을 처리 할 것입니다. 또한 조정 프로세스의 속도를 높이거나 shouldComponentUpdate을 구현하려면 필요에 따라 Cell 구성 요소를 PureComponent까지 확장해야 할 수 있습니다.

이것이 이해가되지 않거나 질문이있는 경우 알려주십시오 (생각합니다).