将“调度”添加到 redux 动作会中断动作（不调度动作运行）答案

【问题标题】：adding 'dispatch' to a redux action breaks action (w/out dispatch the action runs)将“调度”添加到 redux 动作会中断动作（不调度动作运行）
【发布时间】：2021-09-11 03:45:03
【问题描述】：

我正在使用带有 redux-thunk 中间件的 redux。有问题的函数向 API 发出 GET 请求，并在响应时 (.then()) 通过操作将 res 分派到我的 redux 存储。

由于某种原因，当我将 dispatch 传递给父函数时，该函数永远不会运行。当我删除dispatch 时，父函数确实运行了......（？？？）我在同一个应用程序中有多个其他组件成功地遵循了完全相同的模式。出于某种原因，这个特定组件的行为方式很奇怪，尽管我已经检查了三次并且样板文件都是一样的。

这是我的store.jsx：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from '../reducers/root_reducer'

const configureStore = (preloadedState = {}) =>
    createStore(
        rootReducer,
        preloadedState,
        applyMiddleware(thunk, logger)
    );

export default configureStore;

我的行动my_team_actions.js：

import * as APIUtil from '../util/api/my_team_api_util';

export const RECEIVE_ORG_SURVEY = "RECEIVE_ORG_SURVEY"

export const receiveOrgSurvey = survey => ({
    type: RECEIVE_ORG_SURVEY,
    survey
});

export const getOrganizationSurvey = () => dispatch => {
    debugger 
    APIUtil.getOrgSurvey()
        .then((res) => {
            debugger
            dispatch(receiveOrgSurvey(res))
        })
        .catch(err => console.log(err))
}

我的 API 调用my_team_api_util.js：

import axios from 'axios';

export const getOrgSurvey = () => {
    return axios.get(`/api/mongo/organizations/test`)
}

组件容器my_team_container.jsx:

import { connect } from 'react-redux';
import MyTeam from './my_team';
import { getOrganizationSurvey } from '../../actions/my_team_actions';

const mSTP = state => {
    return {
        user: state.session.user,
    };
};

const mDTP = dispatch => {
    return {
        getSurvey: () => getOrganizationSurvey(),
    };
};

export default connect(mSTP, mDTP)(MyTeam);

组件my_team.jsx:

import React from 'react';

class MyTeam extends React.Component {
    constructor(props) {
        super(props)
        this.createTeam = this.createTeam.bind(this);
    }

    createTeam() {
        this.props.getSurvey();
    }

    render() {
        return (
            <div className="my-team-frame frame">
                <div className="my-team-container">
                    <div className="contact-data-container">
                        <div className="contact-data-header header">Contact a Data Scientist</div>
                    </div>
                    <div className="myteam" onClick={this.createTeam}>BUTTON</div>
                </div>
            </div>
        )
    }
}

export default MyTeam;

在客户端，my_team 组件呈现良好，当我单击调用该函数的按钮时，该函数最终将调度我的操作，它似乎仅在 dispatch 不包含在 my_team_actions.js 中的 getOrganizationSurvey() 中时运行即我击中了两个调试器（第二个使用正确的res 对象）。当包含dispatch 时（如上面的 sn-p 所示），我既不会遇到调试器，也不会抛出任何错误。

我真的在这方面摸不着头脑，感谢任何意见！

谢谢，阿拉

【问题讨论】：

标签： reactjs redux action redux-thunk dispatch

【解决方案1】：

天哪，我是个白痴……XD

我说我检查了三次...我应该检查四次！问题出在我的组件容器中 my_team_container.jsx 我只是忘记将 map dispatch 中的 dispatch 传递给 props 对象！

我通过将 dispatch 添加到 getSurvey 回调来修复它...

my_team_container.jsx

import { connect } from 'react-redux';
import MyTeam from './my_team';
import { getOrganizationSurvey } from '../../actions/my_team_actions';

const mSTP = state => {
    return {
        user: state.session.user,
    };
};

const mDTP = dispatch => {
    return {
        getSurvey: () => dispatch(getOrganizationSurvey()),
    };
};

export default connect(mSTP, mDTP)(MyTeam);

有趣的是，你可以在一个问题上花费 2 个小时，认为它毫无希望，然后在你寻求帮助时再看一遍，解决方案就盯着你看?

【讨论】：