如何在redux中链接操作

Question

从研究中，我发现thunk是一种工具，您可以使用它将动作链接在一起和/或处理回调、异步动作和副作用。

我无法理解thunk中间件指南。他们总是引用store.dispatch（就像大多数关于redux的教程一样），但我从未真正调用调度，也从未访问过商店，所以我不确定如何实现他们提出的任何建议。（我假设这是因为我在反应中使用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作为参数。我想在完成将此事件创建为新事件后立即发送此事件链接表操作（使用uuid）。

此外，我还想调用一个标准回调（实际上它将调度另一个操作-LOAD_SAMPLNG_事件）。。但我不确定如何调用回调并返回操作。我还听说，动作创造者那样做是不好的做法，如果在创作过程中出现失败，我也不希望这种情况发生。

要添加其他信息，我将在我的react代码中发送操作：\

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

您可以在函数内部运行业务逻辑，并将操作本身分派。动作创建者setNewsCreator创建一个POJO。然后，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
}

为我的第一句话道歉。事后看来，我没有正确地解释行动。

Answer 2

看来你对还原没有适当的了解。我会告诉你还原商店是如何运作的。然后你将能够理解redux。

在redux，我们有五件事，

动作创建者、动作、调度程序、还原程序、存储

想象一下你想开一家保险公司。好的，这是我们的第一位客户。他来到公司要求“嘿，我需要开一个新账户”。

现在前台人员会说，‘好的，填好这张表格，交给我’，一旦他把表格交给前台，那么这个人就可以离开了。

1. 在redux中，此人被称为动作创建者

一旦调度员拿到表格，他会复印几份并发送给你们公司的所有部门。政策部、会计部、索赔部等

1. 这些部门被称为减速机

现在每个部门都会检查这是什么样的表格。或者是关于开一个新账户。好的，会计部门会得到这笔钱，并把它加到公司的金库里。此外，政策部门将为客户建立一个新的账户。但是，索赔部门不会关心这个表格，因为它不是关于索赔的。这就是我们为对象设置type属性的原因。

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

因此，我们将dispatcher作为动作创建者的参数。然后，一旦我们从异步进程中获得结果，现在我们就可以在action creator中手动调度结果。这个redux thunk充当调度器和还原器之间的中间件。