title: Component not rerendering after Redux state change
body: <p>I have a container with the following code:</p>
  
  <pre><code>class QuoteContainer extends Component {
  
    //FETCH ALL QUOTES
    componentDidMount() {
      this.props.fetchQuotes();
      this.props.fillColorArr();
    }
  
    checkIfQuotesReady = () =&gt; {
      let quotesCheck = this.props.quotesArr.length &gt; 0;
      return quotesCheck;
    }
  
    changeQuoteHandler = () =&gt; {
      let randomQuote = this.props.quotesArr[Math.floor(Math.random() * 100)];
      console.log(randomQuote);
      return randomQuote;
    }
  
    render() {
  
      let quotesReady = this.checkIfQuotesReady();
  
      return (
        &lt;div className="wrapper"&gt;
          {quotesReady ? &lt;Quote quote={this.changeQuoteHandler()}/&gt; : null}
          &lt;Button changeQuote={this.props.displayedQuotesCounter}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      quotesArr: state.quotes,
      counter: state.counter
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      fetchQuotes: () =&gt; {
        fetch('https://talaikis.com/api/quotes/')
          .then(response =&gt; response.json())
          .then(quotes =&gt; dispatch({type: actions.FETCH_QUOTES, fillArr: quotes}))
      },
      fillColorArr: () =&gt; dispatch({type: actions.GET_COLORS}),
      displayedQuotesCounter: () =&gt; dispatch({type: actions.COUNT_QUOTES})
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(QuoteContainer);
  </code></pre>
  
  <p>"changeQuote" on the Button fires an action to update the already displayed quotes count (simple counter). As the counter changes in the Redux state I expected that the the Quote line:</p>
  
  <pre><code>{quotesReady ? &lt;Quote quote={this.props.quotesArr[Math.floor(Math.random() * 100)}/&gt; : null}
  </code></pre>
  
  <p>will rerender and hence a new random quote will be displayed on the screen.
  It turns out that I'm wrong and I'm just curious what might be the possible solution for this one. Have in mind that the Quote component does not have access to the store but has been given the random quote which has been stored in it's local state.
  Also here is my reducer:</p>
  
  <pre><code>import createColorArr from '../utils/colors';
  import * as actions from './actions';
  
  //CREATE COLORS ARRAY FROM OBJECT FILLED WITH COLORS
  const colors = createColorArr(); //IS IT OK?
  
  //INITIAL APPLICATION STATE
  const initialState = {
    quotes: [],
    colors: [],
    shownQuotes: 1
  }
  
  //ROOT (AND THE ONLY ONE) REDUCER
  const reducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case actions.FETCH_QUOTES:
        return {
          ...state,
          quotes: state.quotes.concat(action.fillArr)
        };
      case actions.GET_COLORS:
        return {
          ...state,
          colors: state.colors.concat(colors)
        }
      case actions.COUNT_QUOTES:
        return{
          ...state,
          shownQuotes: state.shownQuotes + 1
        }
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>export default reducer;
  It is a learning purposes project, I am not looking for a solution where I will give an access to the store in the Quote component. Thanks in advance!</p>