Game of Life - Need help starting using Redux

1

After reading some posts here, it looks like using Redux is a great alternative to use for this Game of Life project.

Since I am a new to Redux, I am having difficulty to understand what is a dumb component vs a smart component in this project.

In my view, this is how I see:

GameofLife_Abstract.png1625×973 41.3 KB

NOTE: when I say “Smart Component” vs “Dumb Component” I simply mean that to be a “Smart Component” it is a container, or something that ties with the app’s state, where as a “Dumb Component” simply means it’s job is to simply render whatever it’s being fed on.

If my assumption is correct, then I am having hard time to setup the app state correctly.

Here’s what I’ve written so far:

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

container/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)()

I’m not sure how I can approach at this point. At first I thought about having to wrap all the cells in an array and that would be the app’s state, but I am not sure how to go on about that.

Any response will be greatly appreciated