title: React, updating local states when redux reducer is updated
body: <p>I am making a project using React and Redux.  I am updating a reducer with an array and then mapping that array into a component.  The component has a state which is used to conditionally render a an image.  I want this components state to be reset to its default whenever the reducers state is updated.  </p>
  
  <p>Here is the reducer :</p>
  
  <pre><code>const reducer = (state={board : []}, action) =&gt; {
      switch (action.type) {
        case 'MAKE_BOARD':
        return Object.assign({}, state, {
          board: action.payload
        })
        default:
          return state  
      }
  }
  </code></pre>
  
  <p>Here is the App.js page which calls the reducer:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Board from '../Board/Board'
  import {connect} from 'react-redux'
  
  
  const mapReduxStateToProps= (reduxState) =&gt; ({
    reduxState
  })
  
  class App extends Component {
    state = {
      size : '8',
      squareArray : []
    }
  
    handleChange =(event) =&gt; {
      this.setState({
        ...this.state,
        size : Number(event.target.value)
      })
      console.log(this.state)
    }
  
    //This function makes a an array of numbers with 1/4 'X's and 3/4 'O's
    boardMaker = (number) =&gt; {
      this.setState({squareArray:[]});
      let size = number*number;
      let placeHolderArray = []
  
      for(let i=0; i&lt;size; i++){
        placeHolderArray.push('O')
      }
      for(let j=0; j&lt;size/4;j++){
        placeHolderArray[Math.floor(Math.random()*size)] = 'X'
      }
  
      this.setState({squareArray: placeHolderArray})
      console.log(placeHolderArray)
      console.log(this.state.squareArray);
      this.props.dispatch({type:'MAKE_BOARD', payload: placeHolderArray})
      this.props.dispatch({type: 'SET_SIZE', payload : this.state.size})
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;input onChange={this.handleChange} placeholder='Size'/&gt;
            &lt;button onClick={()=&gt;this.boardMaker(this.state.size)}&gt;Make Board&lt;/button&gt;
  
            &lt;div className='board' style={{width: 40*this.props.reduxState.size.size}}&gt;
  
              {/* {this.state.squareArray.map(space =&gt; {
                return(
                  &lt;div className='square'&gt;{space}&lt;/div&gt;
                )
              })} */}
              {JSON.stringify(this.props.reduxState)}
              {this.props.reduxState.reducer.board.map((space,index) =&gt; 
                &lt;Board keys={index} id={space}/&gt;
              )
              }
            &lt;/div&gt;
  
          &lt;/header&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(mapReduxStateToProps)(App);
  </code></pre>
  
  <p>Here is the board.js where the reducer is being mapped:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './Board.css'
  import { connect } from 'react-redux';
  
  
  const mapReduxStateToProps = (reduxState) =&gt; ({reduxState})
  
  class Board extends Component {
    state = {
      clicked: false,
      displayFlag: false,
      counter: 0,
    }
  
  
    imageDisplay= () =&gt; {
      if(!this.state.clicked &amp;&amp; !this.state.displayFlag){
        return &lt;img key={this.props.id} src='images/Frog-1.png' alt='Not Clicked'/&gt;
      } else if(this.state.displayFlag){
        return &lt;img src='images/Yellow.png' alt='None' /&gt;
      } else {
        return this.state.counter;
      }
    }
  
    handleMouseDown =  e =&gt; {
      document.oncontextmenu = function() {
        return false;
    }
      e = e || window.event;
      //console.log(e.which)
      console.log(this.state)
      switch(e.which) {
        case 1 : this.showNumber(); break;
        case 2 : break;
        case 3 : this.displayFlag(); return false;
        default: break;  
      }
    }
  
    displayFlag= () =&gt; {
      console.log('running')
      this.setState({...this.state, displayFlag : !this.state.displayFlag })
      return this.state.displayFlag;
    }
  
    showNumber= () =&gt; {
      console.log('run')
      let Xcounter = 0;
      let edge = Math.sqrt(this.props.reduxState.reducer.board.length)
      console.log(edge)
      let keys = this.props.keys
      let board = this.props.reduxState.reducer.board
      let minX = keys%edge === 0 ? 0 : -1;
      let maxX = keys%edge === (edge-1) ? 0 : 1;
      let minY = Math.floor(keys/edge) == 0 ? 0 : -1;
      let maxY = Math.floor(keys/edge) == (edge-1) ? 0 : 1;
      for(let x = minX; x &lt;= maxX; x++){
        for(let y = minY; y&lt;=maxY; y++){
          if(board[keys+x+(y*edge)]=== 'X'){
            Xcounter++
  
          }
        }
      }
      if(this.props.id === 'X'){
        this.setState({...this.state, clicked: true, counter: 'X'})
        return this.state.counter;
      }
      this.setState({...this.state, clicked: true, counter: Xcounter})
      return this.state.counter;
    }
  
  
  
    render() {
      return (
        &lt;div className="App"&gt;
            &lt;div onMouseDown={()=&gt;this.handleMouseDown()} className='square'&gt;{this.imageDisplay()}&lt;/div&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(mapReduxStateToProps)(Board);
  </code></pre>
  
  <p>I want the local state on Board to reset when the reducer is updated.  I can probably do this be adding properties to the reducer and using them in the component but I am hoping there is a better method.</p>