在 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 然后运行s 动作（它怎么知道要这样做？），传入调度程序。副作用逻辑是运行（网络调用）。

通过这种方式，副作用逻辑被保留在操作函数对象（？）中并在缩减器（？）之外。

从操作中返回的 promise 是否被吞没了 - 还是可以通过某种方式取回？

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

Answer 1

理解这段代码的最好方法是理解 redux-thunk 做了什么以及中间件有多（真的）简单。

Redux-thunk

Redux-thunk 是 redux 的中间件，它通过接受 function 操作的能力增强了 redux。默认情况下，redux 只接受简单对象（即不是 class 对象或函数），然后它将所述操作分派给商店中的所有 reducer。 redux-thunk 所做的是拦截作为函数的动作，然后调用调度方法的引用（这些动作是 not 调度到 reducers），就这么简单。

你的例子

在您的示例中，情况有点复杂，因为我们（我假设）有一个对外部 api 端点的异步调用。让我们在执行从用户与控件交互到项目的过程中进行分析。

用户交互 - 某些用户交互会引发 onCreateActoin 事件处理程序，进而引发此
调用动作创建者创建者createAction。
创建的动作（带有签名的函数：(reducer) => promise 传递给 store.dispatch。
动作在中间件链下传递。
Redux-thunk 捕获动作并使用一个参数调用函数 - reducer。
该函数通过 callApi 创建一个新的 Promise。
您成功添加了对 promise 的侦听器 (.then)。
诺言归还。
Redux-thunk 打破了中间件链，终止了对操作的任何额外处理。
返回的 promise 冒泡并由原始 dispatch 调用返回（在 onCreateAction 中）
(async) callApi 的承诺完成。
(async) 我们添加的 then 被调用。
(async) addPost 被调用并将结果传递给 store.dispatch。

在 Redux 中定位副作用行为

Positioning side-effectful behavior in Redux

javascript

redux

redux-thunk

react-redux

Redux-thunk

你的例子