Redux的-形实转换

Question

我在一个项目中看到，副作用行为定位在这样的行为中：

// ...in ItemListPage.js
function onCreateItem (name, title, content) {
  this.props.dispatch(createItem({ name, title, content }));
};

// ...in ItemActions.js    
function createItem(post) {
  return (dispatch) => {
    return callApi('items', 'create', {
      item: {
        name: post.name,
        title: post.title,
        content: post.content,
      },
    }).then(res => dispatch(addPost(res.post)));
  };
}

以下是对此处锣的准确描述吗？

从虚拟DOM绑定到事件的函数名为onCreateItem。

运行此功能时，会将操作分派给商店。该操作是调用action-creator（？）createItem的结果。此操作是一个接受调度程序的函数对象。

Redux然后运行操作（它如何知道这样做？），传入调度程序。运行副作用逻辑（网络呼叫）。

通过这种方式，副作用逻辑保持在动作函数对象（？）和减速器（？）之外。

是否吞下了从动作返回的承诺 - 或者可以以某种方式检索它？

此代码的哪一部分正在使用redux-thunk？

Answer 1

理解此代码的最佳方法是了解redux-thunk做什么以及中间件如何（真的）简单。

Redux的-形实转换

Redux-thunk是redux的中间件，可以通过接受function操作来增强redux。默认情况下，redux只接受简单对象（不是类对象或函数），然后将所述操作分配给存储中的所有reducers。 redux-thunk做的是拦截动作，它是函数，然后通过引用调度方法调用（这些动作不分派给减速器），这就是它的意思简单。

您的示例

在您的示例中，情况有点复杂，因为我们（我假设）对外部api端点进行了异步调用。当执行从用户与控件的交互流向项目时，让我们通过它。

用户互动 - 某些用户互动会引发onCreateActoin事件处理程序，而不是
调用动作创建者创建者createAction。
创建的操作（带有签名的函数(reducer) => promise将传递给store.dispatch。
该操作在中间件链中传递。
Redux-thunk捕获动作并使用一个参数reducer调用该函数。
该功能通过Promise创建新的callApi。
您在成功时为承诺添加了一个监听器（.then）。
承诺被退回。
Redux-thunk打破了中间件链，终止了对该操作的任何其他处理。
返回的promise气泡，原始dispatch来电（onCreateAction）
（异步）callApi的承诺完成。
（async）调用我们添加的then。
（异步）addPost被调用，结果传递给store.dispatch。

在Redux中定位副作用行为

1 个答案:

Redux的-形实转换

您的示例