Reactjsの異なるコンポーネントで同じレデューサーを使用

Question

私の反応のアプリケーションに問題があります。私の問題は、私の2つのコンポーネントがmapStateToPropsで返されたデータと衝突し、前のものをオーバーライドするのと同じ減速とアクションを使用しているためです。減速機から別のデータを戻し、オーバーライドしない方法はありますか？

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 (
       <div className={styles.homeBanner} style={headerBannerImage}> 
        <div className={styles.homeBannerText}> 
         <Col lg={10} md={10} sm={10} xs={12} className={util.center}> 
          <h1>{ this.props.data.original_title }</h1> 
          <h4>Release Date: { this.props.data.release_date }</h4> 
         </Col> 
        </div> 
        <div className={styles.overlay}></div> 
       </div> 
      ); 
     } 
    } 
    render(){ 
     return (
       <Grid fluid={true}> 
        <Row> 
         <div className={styles.homeBannerGradient}> 
          { this.renderFirstPopularMovie() } 
         </div> 
        </Row> 
       </Grid> 
     ); 
    } 
} 

function mapStateToProps(state){ 
    return { 
     data: state.film.data[9] 
    } 
} 

export default connect(mapStateToProps, { getMovieByGroup })(HomeBannerIndex); 

は、私もまた同じことをフェッチこの他のコンポーネントを持っている：

私はここのコードは、それが成功したAPIデータと必要なビューをレンダリングgetMovieByGroupアクションを使用して、APIを介してデータをフェッチし、このコンポーネントを持っていますgetMovieByGroup APIを使用してアクションが、それは別のパラメータがあります。

：ここ

class FilmItem extends React.Component { 
    constructor(props){ 
     super(props); 
    } 

    componentWillMount(){ 
     this.props.getMovieByGroup("latest"); 
    } 
    render(){ 
     return (
      <div> 
       <Col lg={2} md={4} sm={6} xs={6}> 
        <div className={styles.filmBox}> 
         <Link to="/movies/2"><Image src="http://lorempixel.com/400/400/sports/" responsive /></Link> 
        </div> 
       </Col> 
       <Clearfix></Clearfix> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state){ 
    return { 
     data: state.film.data 
    } 
} 

export default connect(mapStateToProps, { getMovieByGroup })(FilmItem); 

は私がAPIからフェッチデータをディスパッチ自分の行動のコードです

export function getMovieByGroup(name){ 
    return function(dispatch){ 
      console.log(name); 
     return axios.get(`${API_URL}/movie/`+name, 
      { 
       params: { 
        api_key: API_KEY 
       } 
      } 
     ) 
     .then(response => { 
      if(response.status === 200){ 
       const result = response.data.results; 
       dispatch({ type: GET_FILM_SUCCESS, data: result, group: name }); 
      } 
     }) 
     .catch(error => { 
      const result = error.response; 
      console.log(result); 
      dispatch({ type: GET_FILM_FAILURE, data: result, group: name }); 
     }); 
    } 
} 

はここで減速です：あなたの減速で

import { GET_FILM_SUCCESS,GET_FILM_FAILURE } from 'constants/FilmConstant.jsx'; 

const INITIAL_STATE = { 
    data: {} 
}; 

export default (state = INITIAL_STATE, action) => { 
    switch(action.type) { 
     case GET_FILM_SUCCESS: { 
      return { ...state, data: action.data } 
     } 

     case GET_FILM_FAILURE: { 
      return { ...state, data: action.data } 
     } 
     default: return state; 
    } 
} 

Answer 1

、代わりにdataを設定するので、あなたがGET_FILM_SUCCESSからグループと結果を派遣できます。

export function getMovieByGroup(name){ 
    return function(dispatch){ 
     return axios.get(`${API_URL}/movie/`+name, 
      { 
       params: { 
        api_key: API_KEY 
       } 
      } 
     ) 
     .then(response => { 
      if(response.status === 200){ 
       dispatch({ type: GET_FILM_SUCCESS, data: { group: name, results: response.data.results } }); 
      } 
     }) 
     .catch(error => { 
      dispatch({ type: GET_FILM_FAILURE, data: { group: name, results: error.response } }); 
     }); 
    } 
} 

次に、あなたの減速に次の行を追加します。

import { GET_FILM_SUCCESS,GET_FILM_FAILURE } from 'constants/FilmConstant.jsx'; 

const INITIAL_STATE = { 
    data: {}, 
    error: {}, 
}; 

function processData(initialData, data) { 
    let updated = initialData; 
    updated[data.group] = data.results; 
    return updated; 
} 

export default (state = INITIAL_STATE, action) => { 
    switch(action.type) { 
     case GET_FILM_SUCCESS: { 
      return { ...state, data: processData(state.data, action.data) } 
     } 

     case GET_FILM_FAILURE: { 
      return { ...state, error: processData(state.data, action.data) } 
     } 
     default: return state; 
    } 
} 

私はそのエラーがデータとは別に扱われる好むだろう。セレクタを使用すると、後で細かい制御が可能になります。