Question

我正在尝试为该React Carousel安装Redux，但我陷入了此“非功能”错误中。您可以在此处查看代码： https://stackblitz.com/edit/reactezcarousel-redux

点击分页按钮（图像下方3个灰色点）后，出现“ not a function”错误。

OBS-作为参考，我在这里没有Redux的情况下具有轮播功能： https://stackblitz.com/edit/reactezcarousel

Answer 1

您必须将操作调度到redux。不要尝试将操作传递给组件。为此，您必须在要分派动作的组件内设置mapStateToProps，它将订阅reducer。然后在订阅的减速器旁边的组件中有this.props.dispatch（）。然后您可以导入动作并将其传递给this.props.dispatch（）像这样this.props.dispatch（yourAction（））希望这会有所帮助

Answer 2

我无法在该网站上进行编辑

我将在此处粘贴所做的更改。您只需要更换它即可。

Pagination.js：

import React from 'react'
import {
  Provider
} from 'react-redux'
import store from './store'
import {
  connect
} from 'react-redux'
import {
  handleClick
} from './actions/action1'

class Pagination extends React.Component {
  componentWillMount() {
    this.props.dispatch(handleClick);
  }
  render() {
    console.log("props", this.props)
    if (this.props.carousel_count > 1) {
      const array = new Array(this.props.carousel_count).join(' , ').split(' , ');
      return ( <
        ul className = "pagination" > {
          array.map((each, i) => {
            return ( <
              li key = {
                i + 1
              }
              className = {
                `pagination${i + 1}`
              }
              onClick = {
                () => this.props.dispatch(handleClick(i + 1))
              } > {
                i + 1
              } <
              /li>
            );
          })
        } <
        /ul>
      );
    } else {
      return null;
    }
  }
}

const mapStateToProps = state => ({
  posts: state.posts.items
});
export default connect(mapStateToProps)(Pagination)

index.js：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Pagination from './pagination.js'
import Data from './testdata.js'
import './css/carousel.scss'
import TinyGesture from './TinyGestures'
import { Provider } from 'react-redux'
import store from './store'
import { connect } from 'react-redux'
import { handleClick } from './actions/action1'

// import { createStore, applyMiddleware } from 'redux'

// const store = createStore(() => [], {}, applyMiddleware());

class Carousel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      carousel_count: Data.length
    };
  }
  

  componentDidMount() {
    const target = document.getElementById('carousel-frames');
    const gesture = new TinyGesture(target);
    gesture.on('swiperight', () => {
      this.setState({
        carousel_current: ((this.props.carousel_current > 1) ? this.props.carousel_current - 1 : this.props.carousel_current)
      });
    });
    gesture.on('swipeleft', () => {
      this.setState({
        carousel_current: ((this.props.carousel_current < this.state.carousel_count) ? this.props.carousel_current + 1 : this.props.carousel_current)
      });
    });
  }
  render() {

    return (
      <div className={"ms-Grid carousel f" + this.state.carousel_current + " " + this.props.color}>
        <div id="carousel-frames" className={"ms-Grid-row frame" + this.state.carousel_count}>
          {
            Data.map((each, i) => {
              return (
                <Provider store={store}>
                  <div className="ms-Grid-col background" key={i}>
                    <h2 className="ultra-light category small-text">{each.type}</h2>
                    <figure>
                      <img className="responsive" alt="" src={each.image} />
                    </figure>
                    <h3>{each.title}</h3>
                    <p><a className="link-cta" href="{each.url}">Read Story</a></p>
                    <Pagination
                      carousel_count={this.state.carousel_count} />
                  </div>
                </Provider>
              );
            }
            )
          }
        </div>

      </div>
    );
  }
}
const mapStateToProps = state => ({
  posts: state.posts.items
});
export default connect(mapStateToProps)(Carousel)
render(<Carousel />, document.getElementById('root'));

postReducer.js：

import { carousel_current, carousel_count } from '../actions/types'

const initialState = {
  items: [],
  item: []
}

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case carousel_current:
      return {
        ...state,
        items: action.posts
      }
    default: return state;
  }
}

Answer 3

我发现，它缺少一些redux样板代码。这是工作的redux版本： https://stackblitz.com/edit/reactezcarousel-redux 它缺少“ mapDispatchToProps”部分，因此可以将状态更改发送到商店。

如何完成此Redux安装？

3 个答案: