React Redux + Saga Imageカルーセル

Question

私は、メイン画像とサムネイル画像のリストを含むカルーセルを構築しています。

ユーザーが画像のリストをナビゲートすることを可能にするには、戻ると次のボタンがあります。ここで

は、これまでの私のコードです：

import styles from './carousel.css'; 
import cn from '../../../utils/classname'; 
import actions from '../../../actions'; 

import Magnified from '../../../svg/icons/ui/magnified_glass'; 
import ArrowRight from '../../../svg/icons/ui/arrow_right'; 
import ArrowLeft from '../../../svg/icons/ui/arrow_left'; 

const Carousel = ({ dispatch, selectedCaravan }) => 
    <div className={cn(styles.carouselWrap)}> 
     <div className={cn(styles.carouselFeatWrap)}> 
      <a href="#" className={cn(styles.carouselExpand)} onClick={() => dispatch({ type: actions.CAROUSEL_EXPAND })}> 
       <Magnified /> 
      </a> 
      <ul className={cn(styles.carousel)}> 
     {selectedCaravan.images && selectedCaravan.images.map((image, i) => { 
      return <li key={i}> 
      <img src={image} /> 
      </li>; 
     })} 
      </ul> 
     </div> 
     <div className={cn(styles.carouselThumbNavWrap)}> 
      <ul className={cn(styles.carouselThumbnails)}> 
     {selectedCaravan.images && selectedCaravan.images.map((image, i) => { 
      return <li key={i} onClick={() => dispatch ({ type: actions.CAROUSE_GO_TO })}> 
      <img src={image} /> 
      </li>; 
     })} 
      </ul> 
      <div className={cn(styles.carouselNavigation)}> 
       <a href="#" className={cn(styles.carouselNavPrev)} onClick={() => dispatch({ type: actions.CAROUSEL_PREV })}> 
        <ArrowLeft /> 
       </a> 
       <a href="#" className={cn(styles.carouselNavNext)} onClick={() => dispatch({ type: actions.CAROUSEL_NEXT })}> 
        <ArrowRight /> 
       </a> 
      </div> 
     </div> 
    </div>; 

export default Carousel; 

は、私はそのようなCAROUSEL_NEXTやCAROUSEL_PREVなどのアクションを持っています。私は自分のサガの中でこれらの行動を聴いていて、これについて私が考えているのは、選択したインデックスを更新して、何らかの方法で主画像をユーザが選択したものに更新する必要があるということです。

私の武勇伝は、これまでのようになります。

私は、ユーザーが新しいイメージとどのようにアニメーション化または本質的にカルーセルスライドを作ることを選択したときに、選択したインデックスを更新する方法がわかりませんよ。

Answer 1

あなたはサガをまったく必要としないと思います。

あなたはちょうどあなたがreact-redux

const Component = ({ selectedImageId, onNext, onPrev, onSelect }) => (
 
    <div> 
 
    <CarouselMainImage 
 
     id={selectedImageId} // this component will know which image to display based on this id 
 
    /> 
 
    {/* ... */} 
 
    <CarouselImages 
 
     onClick={onSelect} 
 
    /> 
 
    {/* ... */} 
 
    <PrevBtn 
 
     onClick={onPrev} 
 
    /> 
 
    <NextBtn 
 
     onClick={onNext} 
 
    /> 
 
    {/* ... */} 
 
    </div> 
 
) 
 

 
const mapStateToProps = state => ({ 
 
    selectedImageId: state.selectedImageId 
 
}) 
 

 
const mapDispatchToProps = dispatch => 
 
    // use action creators here 
 
    bindActionCreators({ 
 
    onNext: onSelectNext, 
 
    onPrev: onSelectPrev, 
 
    onSelect: onSelectById, 
 
    }, dispatch) 
 

 
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)

からのコールバックを渡し、この後に減速

// Action creators 
 
const selectNext =() => ({ 
 
    type: 'SELECT_NEXT', 
 
}) 
 

 
const selectPrev =() => ({ 
 
    type: 'SELECT_PREV', 
 
}) 
 

 
const selectById = (id) => ({ 
 
    type: 'SELECT_BY_ID', 
 
    payload: id, 
 
}) 
 

 
// Reducer 
 

 
const initial = { 
 
    selectedImageId: 0, 
 
    /* other state */ 
 
} 
 

 
function reducer(state = initial, action) { 
 
    switch(action.type) { 
 
    case 'SELECT_NEXT': 
 
     return { 
 
     ...state, 
 
     selectedImageId: state.selectedImageId + 1, 
 
     } 
 
    case 'SELECT_PREV': 
 
     return { 
 
     ...state, 
 
     selectedImageId: state.selectedImageId - 1, 
 
     } 
 
    case 'SELECT_BY_ID': 
 
     return { 
 
     ...state, 
 
     selectedImageId: action.payload, 
 
     } 
 
    default: 
 
     return state 
 
    } 
 
}

のためのアクションを定義します

トランジションの場合は、これを使用できます。https://github.com/reactjs/react-transition-group