Question

通过研究，我发现thunk是您用来将动作链接在一起和/或处理回调，asyc动作和副作用的工具。

我在理解thunk middleware指南时遇到了麻烦。他们一直都引用“ store.dispatch”（就像关于redux的大多数教程一样），但是我从来没有真正调用过dispatch，也从来没有访问“ store”的机会，所以我不确定如何实现他们提出的任何建议。（我想这是因为我在react ....中使用mapDispatchToProps...。这不是我的动作创建者文件中的选项）

下面是我的动作创建者（为清楚起见删除了一些代码）：

import { CREATE_NEW_SAMPLING_EVENT } from '../Constants/ActionTypes';
import { emptySamplingEvent } from '../Constants/SamplingEvent';
import _ from 'lodash';
import uuidv4 from 'uuid';

export function createNewSamplingEvent(eventName) {
    let newEvent = _.cloneDeep(emptySamplingEvent);
    newEvent.eventID = uuidv4();
    newEvent.eventName = eventName;
    newEvent.dateModified = new Date();

    //TODO: call an optional callback 
    //TODO: dispatch eventLinkTable event

    return { type: CREATE_NEW_SAMPLING_EVENT, event: newEvent }
}

我想做的事在“待办事项”中列出。

我在另一个动作创建者文件和另一个reducer中还有另一个动作，称为EVENT_LINK_TABLE，它将以该动作创建者的uuid作为参数。完成这个新事件后，我想立即调度此EVENT_LINK_TABLE操作（使用uuid）。

此外，我想调用标准回调（实际上将分派另一个动作-LOAD_SAMPLNG_EVENT）。但是我不确定如何调用该回调并返回该动作。我还听说动作创建者这样做是不正确的做法，并且我不希望在创建过程失败的情况下发生这种情况。

要添加其他信息，这是我在我的反应代码中调度动作的位置：\

handleBrandNewButtonClick = () => {
    this.props.createNewSamplingEvent(this.state.newSamplingEventName);
}

此组件已被“连接”：

const mapStateToProps = function (state) {
    return {
        samplingEvents: state.SamplingEvents, //to get list of sampling events to check for uniqueness for that user
    }
}

const mapDispatchToProps = {
    createNewSamplingEvent,
}

export default withRouter(
    withStyles(styles, { withTheme: true })
        (connect(mapStateToProps, mapDispatchToProps)
            (NewEventForm)
        )
);

Answer 1

好像您对redux没有足够的了解。我会告诉你redux存储如何工作。然后，您将能够了解redux。

在redux中，我们有五件事，

动作创建者，动作，调度程序，Reducers，商店

想象一下您想开一家保险公司。好的，这是我们的第一个客户。他来到公司，问：“嘿，我需要开一个新帐户”。

现在，前台人员会说：“好，填好表格并将其交给我”。一旦他将表格交给前台，该人员便可以离开。

在redux中，此人被称为Action Creator
表单本身就是操作创建者返回的对象
前台人员称为Dispatcher

一旦调度员收到该表格，他将对其进行复印并发送给您公司的所有部门。政策部门，会计部门，索赔部门等

这些部门被称为减速器

现在每个部门将检查这是哪种形式。或者是关于开设一个新帐户。好的，会计部门将获得这笔款项并将其添加到公司金库中。此外，政策部门将为客户创建一个新帐户。但是，索赔部门不会在意此表格，因为它与索赔无关。这就是为什么我们为对象设置“类型”属性的原因。

动作创建者应该只返回普通对象。例如，如果动作创建者中存在异步调用，则它不会返回普通对象，因此我们需要一些中间件来避免此问题。在这里，我们有redux-thunk。该中间件将帮助我们手动执行调度过程。

因此，我们将调度程序作为操作创建者的参数。然后，一旦我们从异步过程中获得了结果，现在我们就可以在该动作创建者内部手动分派结果。该redux thunk充当了调度程序和缩减程序之间的中间件。

Answer 2

您可以在函数内部运行业务逻辑，并dispatch操作本身。动作创建者setNewsCreator创建一个POJO。然后dispatch将那个POJO当作一个动作，该动作将被化简器拾取

// action creator
const setNewsCreator = ({ news }) => ({ type: 'SET_NEWS', news })

const fetchNews = () => async dispatch => { 
    const response = await getNews()
    dispatch(setNewsCreator({ news: response }))
}

及其在组件中的用法

componentDidMount() {
    this.props.fetchNews() // assuming you've added this function to your mapDispatchToProps
}

抱歉，我的第一个评论。事后看来，我没有正确解释动作。

如何在Redux中链接动作

2 个答案: