调度操作不是设置 redux 的结果

Question

在过去的 18 小时里，我一直在为此苦苦挣扎，但我不知道自己做错了什么。 I have redux setup and I have it dispatching actions and receiving state correctly for other components but in one component I want to dispatch an action on click, which then calls an api and sets the app state in redux with the results of the api.

但它只是不返回任何东西。 如果我在其中进行硬编码，我可以使用字符串手动设置有效负载，这样我就知道该操作可以正常触发。 我还检查了 api 工作正常，我什至尝试用 jsontypicode 虚拟结果替换 api 以查看是否有区别，但没有。 任何人都可以帮我指出正确的方向吗？

这是我的代码。

行动：

import axios from 'axios';
import { SET_POSTS } from "./types";

export const setPosts = () => dispatch => {
    axios
        .get(`https://jsonplaceholder.typicode.com/todos/`)
        .then(res =>
            dispatch({
                type: SET_POSTS,
                payload: res.data,
                settingCorrect: true
            })
        )
        .catch(err =>
            dispatch({
                type: SET_POSTS,
                payload: {}
            })
        );
};

减速器：

import { SET_POSTS } from '../actions/types';

const initialState = {
    loading: true,
};

export default function(state = initialState, action){

    const { type, payload } = action;

    switch(type){
        case SET_POSTS:
            return {
                ...state,
                posts: payload,
                loading: false
            }
        default:
            return state;
    }

}

应用程序：

    selectUnit = (e,unit) => {
            this.props.setPosts();
            this.props.setHistoricalData(unit);
    };

   ....

const mapDispatchToProps = (dispatch) => {
    return {
        setPosts: () => {
            dispatch({
                type: 'SET_POSTS',
            })
        },
        setHistoricalData: (history) => {
            dispatch({
                type: 'GET_HISTORICAL_DATA'
            })
        }
    }
};

export default connect(mapStateToProps,mapDispatchToProps)(Posts);

Answer 1

看来您只是没有使用mapDispatchToProps中的 create 操作。 如果我正确理解您的架构，以下将是正确的mapDispatchToProps ：

const mapDispatchToProps = (dispatch) => {
    return {
        setPosts: () => {
            dispatch(setPosts())
        },
        setHistoricalData: (history) => {
            dispatch(getHistoricalData(history))
        }
    }
};

同时记住导入您的动作创建者功能。