title: where should I dispatch my redux
body: <p>I am learning react and redux, and I just have a small question about where should I dispatch and share my redux store to react components, should I share and dispatch my store in whatever components that need the store or I should share and dispatch my store in one main component and share that values as props to order components? 
    for example I have these three components and I have my states stored in one FlashCard component and share that states to Cardlist component using props and then the CardList component will send that props to Card component. is it the right thing to do? and also in card component I use dispatch because it seem more convenient, but should I use dispatch in my main component FlashCard as well and pass the change to Card component? thanks for your help.</p>
  
  <pre><code>import React from 'react';
  import CardList from './cardList';
  import {connect} from 'react-redux';
  
  const FlashCard =(props)=&gt;{
      return (
      &lt;div&gt;
          &lt;CardList
              cards={props.cards}
          /&gt;
      &lt;/div&gt;
  )}
  
  const mapStateToProps=(state)=&gt;({
      cards:state.cards
  })
  
  export default connect(mapStateToProps,null)(FlashCard)
  </code></pre>
  
  <p>and </p>
  
  <pre><code>import React from 'react';
  import Card from './card';
  
  const CardList =(props)=&gt;{
      const card=props.cards.map((c,i)=&gt;(
          &lt;Card
              key={i}
              card={c}
          /&gt;
      ))
      return(
      &lt;div&gt;{card}&lt;/div&gt;
  )}
  
  export default CardList
  </code></pre>
  
  <p>and a Card component to render all the cards</p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import { showCardInfo, hideCardInfo } from '../redux/flashCardRedux';
  
  const Card =(props)=&gt;{
      const onCardClick=()=&gt;{
          console.log(props.card.id)
      }
      return (
      &lt;div&gt;
  
          {props.card.showInfo?
  
          &lt;div
              onClick={()=&gt;props.dispatch(hideCardInfo(props.card.id))}
          &gt;{props.card.name}&lt;/div&gt;
          :
          &lt;div
              className='card'
              onClick={()=&gt;props.dispatch(showCardInfo(props.card.id))}
          &gt;
              &lt;div className='img'&gt;
                  &lt;img src={props.card.img}/&gt;
                  &lt;h3&gt;{props.card.name}&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;}
  
      &lt;/div&gt;
  
  )}
  
  export default connect()(Card)
  </code></pre>