Question

我正在构建一个包含主图像和缩略图列表的轮播。

有prev和next按钮允许用户浏览图像列表。

到目前为止，这是我的代码：

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等行为。我在我的传奇中听这些动作，我对此的想法是我需要更新所选索引并以某种方式将主图像更新为用户选择的任何一个。

到目前为止，我的传奇看起来像这样：

const carouselPrev = function* (payload) {

  const updateSelectedIndex = payload.updateSelectedIndex;

  if (updateSelectedIndex) {
    return false;
  }

  yield put({ type: actions.CAROUSEL_PREV, payload: updateSelectedIndex });

};

我不确定当用户选择新图像时如何更新所选索引以及如何动画或基本上使轮播幻灯片滑动。

Answer 1

我认为你根本不需要这个传奇。

您只需定义减速器的操作

＆＃13;

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

＆＃13;

之后你传递了来自react-redux

的回调

＆＃13;

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)

＆＃13;

对于过渡，您可以使用：https://github.com/reactjs/react-transition-group

React Redux + Saga Image Carousel

1 个答案: