如何在 redux 中链接操作答案

【问题标题】：How to chain actions in redux如何在 redux 中链接操作
【发布时间】：2019-08-31 07:22:13
【问题描述】：

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

我无法理解thunk middleware 指南。他们一直引用“store.dispatch”（就像大多数关于 redux 的教程一样）但我从来没有真正调用过 dispatch 也从来没有访问过“store”，所以我不确定如何实现他们提出的任何东西。（我认为这是因为我在反应中使用了 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 }
}

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

我有另一个动作，在不同的动作创建者文件和不同的减速器中称为 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)
        )
);

【问题讨论】：

我认为您对 redux 的解释不正确。在考虑使用中间件之前，请确保您首先了解 vanilla redux。您的代码的结构使其非常不友好。让动作创建者保持苗条，并将业务逻辑保留在动作本身中
动作本身就是{ type: CREATE_NEW_SAMPLING_EVENT, event: newEvent } ...这还不够细吗？ redux 工作流程的下一个项目是 reducer，它不允许有副作用。如果我不能在动作中使用它，也不能在减速器中使用它......我不确定我会在哪里放置任何实际逻辑。
什么资源告诉你不要在动作中加入任何逻辑？因为那是很多层面的错误。 thunk 的全部意义在于为您提供了很多选项来将逻辑放入操作中
redux.js.org/introduction/core-concepts -- “动作是一个普通的 JavaScript 对象（请注意我们没有引入任何魔法？），它描述了发生的事情。”另请参阅下面 Dilshan 的回答 - “动作创建者应该只返回普通对象”（暗示那些普通对象就是动作）
我可以看出你的困惑来源。那个声明写得很糟糕。是的，动作是对象，但没有什么能阻止您使用最终运行动作的业务逻辑创建函数。让我进一步详细说明

标签： reactjs redux

【解决方案1】：

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

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

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

【讨论】：

如果您对我使用的语法有任何疑问，请随时提问

【解决方案2】：

看来你对 redux 没有足够的了解。我会告诉你 redux store 是如何工作的。然后你就可以理解redux了。

在 redux 中，我们有五样东西，

Action 创建者、Action、Dispatcher、Reducers、Store

想象一下，您想开一家保险公司。好的，这里我们有我们的第一个客户。他来到公司询问，'嘿，我需要开一个新帐户'。

现在前台的人会说，“好的，填写这张表格并给我”一旦他把表格交给前台，这个人就可以离开了。

在 redux 中，此人称为 Action Creator
表单本身称为从动作创建者返回的对象
前台人员称为调度员

调度员收到表格后，会将表格复印一些并发送给贵公司的所有部门。政策部、会计部、理赔部等

这些部门被称为减速器

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

动作创建者应该只返回普通对象。例如，如果在 action creator 中有一个异步调用，它不会返回一个普通的对象，所以我们需要一些中间件来避免这个问题。这里我们有 redux-thunk。这个中间件将帮助我们手动完成调度过程。

所以我们将调度程序作为参数传递给动作创建者。然后，一旦我们从异步过程中获得结果，现在我们可以在该动作创建器中手动分派结果。这个 redux thunk 充当 dispatcher 和 reducer 之间的中间件。

【讨论】：