为什么所有 redux reducer 函数都在运行时执行？答案

【问题标题】：Why all redux reducer functions execute at runtime?为什么所有 redux reducer 函数都在运行时执行？
【发布时间】：2019-06-03 08:18:13
【问题描述】：

我正在尝试使用 React + Redux + thunk 深入了解

考虑一下，在这种情况下我使用 react-redux 和 redux-thunk ！

例如，我的应用中有 2 个减速器：

function loadingReducer(state = false, action) {
    console.log('loadingReducer');
    
    switch(action.type) {
        case 'LOADING':
            return action.loading
        default:
            return state
    }
}

function itemsReducer(state = [], action) {
    console.log('itemsReducer');
    
    switch(action.type) {
        case 'ITEMS':
            return action.data
        default:
            return state
    }
}

在运行时所有函数都会执行，我在浏览器控制台中为每个 reducer 设置了 4 个 console.log，最后是 6 个 console.log，这意味着 redux 执行并检查了 reducer 函数的六次，我认为它没有优化性能一个大型项目...

所以，主要的问题是，这是处理这个问题的技巧还是我应该使用其他包，如 saga 或 mobx 来处理它？

谢谢

【问题讨论】：

你是怎么接线的？
@Alex - 减速器仅在触发动作后触发。查看您的组件以及您在哪里使用您的操作。此外，使用 redux 开发工具将帮助您反省操作和整个流程。

标签： javascript reactjs redux

【解决方案1】：

所有控制台日志都运行的原因是因为combineReducers 的工作原理……本质上是遍历每个reducer 的代码。但是大部分都没有执行，因为它位于 switch 语句中。所以这不会造成性能问题。

如果您说的是应用程序启动时的多个日志..那是因为 redux 在应用程序启动时调度了 2-3 个操作（如上所述，这将导致所有日志运行。您可以通过使用console.log(action) 将操作本身记录在这些减速器之一中来检查它们。

一般来说，如果您在 reducer 中的 switch 语句之外没有很多代码，那么您会没事的。无论如何，这是可行的，因为使用 redux-thunk，你的大部分代码都应该进入你的操作，而 reducer 只是改变状态。

【讨论】：

【解决方案2】：

每次调度动作时都会调用所有减速器，即更改应用程序状态。

任何 reducer 都可以选择监听任何动作并根据需要更新其状态。当 reducer 连接到 store 时，它们负责处理应用程序的一部分。

一个用例是：当你有一个购物车减速器、一个购物页面减速器和一个购物页面时。

shopping page 发送一个动作，表示商品已添加到购物车。购物页面的 reducer 会监听这个并更新项目状态，用绿色表示它已被添加到购物车中

负责购物车图标的cart reducer 也收到此消息并更新计数。

【讨论】：