Обновление редукционного состояния onClick

Question

У меня есть компонент, который отображает данные из состояния.Я использую редекс для государства.Я хочу иметь возможность нажимать кнопку и фильтровать состояние.Но я застрял на отправке действия с кнопки.

Сейчас у меня есть кнопка, которая должна отправлять действие, но оно не вызывается.Я не уверен, что mapsToDispatchProps не так или это что-то еще.

Вот действия

import { GET_POLLS, SHOW_APPROVAL } from './types';


const URL = 'https://projects.fivethirtyeight.com/polls/polls.json';

export const getPolls = () => dispatch => {

    return fetch(URL)
        .then(res => res.json())
        .then(polls => {
            dispatch({ type: GET_POLLS, payload: polls })
        })


}

export const getApproval = () => ({ type: SHOW_APPROVAL }) 

редуктор

import {
    GET_POLLS,
    SHOW_APPROVAL
} from '../actions/types';



const pollReducer = (state = [], { type, payload }) => {
    switch (type) {
        case GET_POLLS:
            return payload
        case SHOW_APPROVAL:
            return (payload.type === "trump-approval")
        default:
            return state
    }
}

export default pollReducer;

типы

export const GET_POLLS = 'GET_POLLS';
export const POLLS_LOADING = 'POLLS_LOADING';
export const SHOW_ALL = 'SHOW_ALL';
export const SHOW_APPROVAL = 'SHOW_APPROVAL';

список, отображающий данные

import React, { Component } from 'react'
import { PollCard } from '../Components/PollCard'
// import FilterLink from './FilterLink'
import * as moment from 'moment';

import { connect } from 'react-redux'
import { getPolls, getApproval } from '../actions/index';

class PollList extends Component {

    componentDidMount() {
        this.props.getPolls();
    }



    render() {


        console.log("rendering list")
        const { polls } = this.props

        const range = 30
        var dateRange = moment().subtract(range, 'days').calendar();
        var filteredPolls = polls.filter(e => Date.parse(e.endDate) >= Date.parse(dateRange)).reverse()



        return (

            <React.Fragment>
                <button onClick={getApproval}>
                    Get Approval

                </button>
                {console.log("get approval", getApproval)}


                {
                    filteredPolls && filteredPolls.map((poll) => (
                        <div key={poll.id}>
                            <PollCard poll={poll} />

                            {/* {(poll.type)} */}

                        </div>
                    ))




                }
            </React.Fragment>

        )
    }
}

const mapStateToProps = state => ({
    polls: state.polls
});

const mapDispatchToProps = {
    getApproval
};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    { getPolls, getApproval }
)(PollList);


// export default PollList;

Answer 1

Вы не вызываете функцию действия.

// Either destructure it
const { polls, getApproval } = this.props;
<button onClick={getApproval}>
    Get Approval
</button>
// Or use this.props.function
<button onClick={this.props.getApproval}>
    Get Approval
</button>

// You don't need this
const mapDispatchToProps = {
    getApproval
};
// You don't need this

const mapStateToProps = state => {
    return {polls: state.polls};
};
export default connect(
    mapStateToProps,
    // Doing this is easier, cleaner & faster
    { getPolls, getApproval }
)(PollList);

Здесь вы делаете это правильно;

componentDidMount() {
    this.props.getPolls();
}

Answer 2

Ваш mapDispatchToProps() настроен неправильно. Вам нужно определить function, который возвращает object, определяя пару ключ-значение для каждого action, который вы хотите сделать доступным как prop в своем компоненте.

const mapDispatchToProps = (dispatch) => {
   return {
      getApproval: () => {
         dispatch(getApproval())
      },
      getPolls: () => {
         dispatch(getPolls())
      }
   }
}

export default connect(
    mapStateToProps,
    mapDispatchToProp)(PollList);

Теперь getPolls доступен как опора, и вы можете использовать его в componentDidMount()

componentDidMount() {
    this.props.getPolls();
}

Вы также должны создать обработчик onClick для вашего getApproval действия

handleClick = () => {
   this.props.getApproval()
}

А затем подключите его к прослушивателю событий onClick

<React.Fragment>
    <button onClick={this.handleClick}>
        Get Approval
    </button>
    console.log("get approval", getApproval)}
    {
        filteredPolls && filteredPolls.map((poll) => (
           <div key={poll.id}>
              <PollCard poll={poll} />
                 {/* {(poll.type)} */}
           </div>
        ))
    }
</React.Fragment>

Файл действий

export const getPolls = () => dispatch => {
      fetch(URL)
        .then(res => res.json())
        .then(polls => {
            dispatch({ type: GET_POLLS, payload: polls })
        })
        .catch(errors => {
            dispatch({ type: "GET_ERRORS", payload: errors.response.data })
        })
}

Редуктор

import {
    GET_POLLS,
    SHOW_APPROVAL
} from '../actions/types';

const pollReducer = (state = [], { type, payload }) => {
    switch (type) {
        case GET_POLLS:
            return payload
        case SHOW_APPROVAL:
            return state.filter((poll) => {
                return poll.type === "trump-approval"
            })
        case "GET_ERRORS":
            return payload
        default:
            return state
    }
}

export default pollReducer;