Question

我有一个显示状态数据的组件。我正在使用redux进行状态。我希望能够单击一个按钮并过滤状态。但是我一直坚持从按钮分派动作。

现在我有一个按钮，该按钮应该用于分派动作，但并未被调用。我不确定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

您的mapDispatchToProps()似乎配置不正确。您需要定义一个返回function的{{1}}，为要在组件中用作object的每个action定义一个键值对。

prop

现在getPolls可作为道具使用，您可以在const mapDispatchToProps = (dispatch) => { return { getApproval: () => { dispatch(getApproval()) }, getPolls: () => { dispatch(getPolls()) } } } export default connect( mapStateToProps, mapDispatchToProp)(PollList);中使用它

componentDidMount()

您还应该为componentDidMount() { this.props.getPolls(); }动作创建onClick处理程序

getApproval

然后将其连接到您的onClick事件监听器

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

动作文件

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

Answer 2

您没有调用动作函数。

// 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();
}

更新redux状态onClick

2 个答案:

动作文件

减速器