Redux - 调用一系列函数或reducer？

Posted 2023-02-21

【中文标题】Redux - 调用一系列函数或reducer？

【英文标题】：Redux - calling a chain of functions in action or reducer?

【发布时间】：2017-08-12 05:16:10

【问题描述】：

我有一个逻辑问题，我是否应该调用多个函数来响应动作中的每个回调：

export const myAction= () => (distaptch, getState) => 
    callFunctionA(function(e)
        if(e)
            dispatch(eventA(e));

            callFunctionB(function(e)

                dispatch(eventB(e));

                callFunctionC(function(e)

                    dispatch(eventC(e));
                );
            );
        
    );

或者我可能想将这些调用移动到 redux reducer 并从那里调用每个 next 函数？

const reducer = (state=, action) => 
  switch (action.type) 
    case 'EVENT_A':

      callFunctionB(action.e);

      return state;
    case 'EVENT_B':

        callFunctionC(action.e);
        return state;   
    default:
      return state
  

在我看来，第二种方法就像是导致意大利面条代码的反模式......也许我错了？

【问题讨论】：

“第二种方法在我看来像反模式”第一种方法看起来像回调地狱

@Daniel_L，你会考虑从 reducer 中调用函数吗？

我会考虑看看像 redux-saga 或 redux-observable 这样的库来处理转换异步操作，因为这样你就不会得到易于维护的代码。

@ArkadyB 我使用 thunk 并承诺调度操作

【参考方案1】：

您认为在 reducer 中调度操作是一种反模式是正确的。原因很简洁in this post.

来自 Redux 文档：

你不应该在 reducer 中做的事情：

改变它的参数；

执行 API 调用和路由转换等副作用；

(调用非纯函数，例如 Date.now() 或 数学随机（）。

[...] 现在，请记住减速器必须是 纯的。给定相同的参数，它应该计算下一个状态和 把它返还。没有惊喜。没有副作用。没有 API 调用。没有突变。 只是一个计算。

您可以查看Redux-Saga 来处理异步流，以避免您在第一个示例中显示的操作的回调地狱。

【讨论】：

thunk 的作用和 await/async 一样吗？

这里有一篇文章详细介绍了 async/await 与 redux-thunk 与 redux-saga 之间的差异/相似之处。 ***.com/questions/34930735/…