Как закончить установку Redux?

Question

Я пытаюсь установить Redux для этой React Carousel, и я застрял в этой ошибке «не функция».Вы можете увидеть код здесь: https://stackblitz.com/edit/reactezcarousel-redux

Как только я нажимаю на нумерацию страниц (3 серые точки под изображением), появляется ошибка "не функционирование".

OBS - в качестве справки яКарусель работает без Redux здесь: https://stackblitz.com/edit/reactezcarousel

Answer 1

Я не могу редактировать на этом сайте

Я вставлю свои изменения здесь. Вы должны просто заменить его.

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 2

Я понял, что не хватает какого-то избыточного кода котельной плиты. Вот работающая версия для редукса: https://stackblitz.com/edit/reactezcarousel-redux В нем отсутствовала часть mapDispatchToProps, поэтому он мог отправить изменение состояния в хранилище.

Answer 3

вы должны отправить действие в редуксене пытайтесь передать действие компоненту.Для этого вам нужно настроить mapStateToProps внутри компонента, для которого вы хотите отправить действие, он подпишется на редуктор.и затем у вас есть this.props.dispatch () внутри вашего компонента рядом с подписанным редуктором.затем вы можете импортировать действие и передать его this.props.dispatch () следующим образом this.props.dispatch (yourAction ()) надеюсь, это поможет