title: Using the same reducer by different component in Reactjs
body: <p>I'm having a problem in my react application. My problem is since my two component is using the same reducers and action they conflict with the data they return in mapStateToProps and overriding the previous one. Is there a way that they will return different data from the reducer and not overriding?</p>
  
  <p>I have this component that fetch data via api using the <code>getMovieByGroup</code> action it successfully render the needed view with the api data, here's the code:</p>
  
  <pre><code>class HomeBannerIndex extends React.Component {
      constructor(props){
          super(props);
      }
  
      componentWillMount(){
          this.props.getMovieByGroup("popular");
      }
      renderFirstPopularMovie(){
          if(this.props.data){
  
              var headerBannerImage = {
                  backgroundImage: 'url(' + IMAGE_PATH + '/' + this.props.data.backdrop_path + ')'
              };
  
              return (
                  &lt;div className={styles.homeBanner} style={headerBannerImage}&gt;
                      &lt;div className={styles.homeBannerText}&gt;
                          &lt;Col lg={10} md={10} sm={10} xs={12} className={util.center}&gt;
                              &lt;h1&gt;{ this.props.data.original_title }&lt;/h1&gt;
                              &lt;h4&gt;Release Date: { this.props.data.release_date }&lt;/h4&gt;
                          &lt;/Col&gt;
                      &lt;/div&gt;
                      &lt;div className={styles.overlay}&gt;&lt;/div&gt;
                  &lt;/div&gt;
              );
          }
      }
      render(){
          return (
                  &lt;Grid fluid={true}&gt;
                      &lt;Row&gt;
                          &lt;div className={styles.homeBannerGradient}&gt;
                              { this.renderFirstPopularMovie() }
                          &lt;/div&gt;
                      &lt;/Row&gt;
                  &lt;/Grid&gt;
          );
      }
  }
  
  function mapStateToProps(state){
      return {
          data: state.film.data[9]
      }
  }
  
  export default connect(mapStateToProps, { getMovieByGroup })(HomeBannerIndex);
  </code></pre>
  
  <p>I also have this other component that also fetch the same getMovieByGroup action via api but it has different parameter:</p>
  
  <pre><code>class FilmItem extends React.Component {
      constructor(props){
          super(props);
      }
  
      componentWillMount(){
          this.props.getMovieByGroup("latest");
      }
      render(){
          return (
              &lt;div&gt;
                  &lt;Col lg={2} md={4} sm={6} xs={6}&gt;
                      &lt;div className={styles.filmBox}&gt;
                          &lt;Link to="/movies/2"&gt;&lt;Image src="http://lorempixel.com/400/400/sports/" responsive /&gt;&lt;/Link&gt;
                      &lt;/div&gt;
                  &lt;/Col&gt;
                  &lt;Clearfix&gt;&lt;/Clearfix&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state){
      return {
          data: state.film.data
      }
  }
  
  export default connect(mapStateToProps, { getMovieByGroup })(FilmItem);
  </code></pre>
  
  <p>Here's the code in my action where I dispatch the data that I fetch from the API:</p>
  
  <pre><code>export function getMovieByGroup(name){
      return function(dispatch){
              console.log(name);
          return axios.get(`${API_URL}/movie/`+name,
              {
                  params: {
                      api_key: API_KEY
                  }
              }
          )
          .then(response =&gt; {
              if(response.status === 200){
                  const result = response.data.results;
                  dispatch({ type: GET_FILM_SUCCESS, data: result, group: name });
              }
          })
          .catch(error =&gt; {
              const result = error.response;
              console.log(result);
              dispatch({ type: GET_FILM_FAILURE, data: result, group: name });
          });
      }
  }
  </code></pre>
  
  <p>Here's the reducer:</p>
  
  <pre><code>import { GET_FILM_SUCCESS,GET_FILM_FAILURE } from 'constants/FilmConstant.jsx';
  
  const INITIAL_STATE = {
      data: {}
  };
  
  export default (state = INITIAL_STATE, action) =&gt; {
      switch(action.type) {
          case GET_FILM_SUCCESS: {
              return { ...state, data: action.data }
          }
  
          case GET_FILM_FAILURE: {
              return { ...state, data: action.data }
          }
          default: return state;
      }
  }
  </code></pre>