Reagieren Redux + Saga Image Karussell

Question

Ich baue ein Karussell, das ein Hauptbild und eine Liste von Miniaturbildern enthält.

Es gibt zurück und neben Tasten, damit der Benutzer durch die Liste der Bilder navigieren.

Hier ist mein Code so weit:

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; 

Ich habe Aktionen wie CAROUSEL_NEXT und CAROUSEL_PREV. Ich lausche auf diese Aktionen in meinen Sagas und denke, dass ich den ausgewählten Index aktualisieren und das Hauptbild irgendwie auf den vom Benutzer ausgewählten aktualisieren muss.

Meine Saga sieht wie folgt aus so weit:

Ich bin nicht sicher, wie der ausgewählten Index zu aktualisieren, wenn ein Benutzer ein neues Bild auswählt und wie zu animieren oder im Wesentlichen das Karussell Schlitten machen.

Answer 1

Ich denke, du brauchst die Sage überhaupt nicht.

Sie definieren nur die Aktionen für die Reduzierung

// 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 
 
    } 
 
}

danach Sie die Rückrufe von 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)

passieren

Für Übergänge könnten Sie dies verwenden: https://github.com/reactjs/react-transition-group