Question

我想通过React + Redux + thunk来获得更深的知识

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

例如，我的App中有2个reducer：

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已执行并检查了6次这些reducer函数，我认为这并不是针对优化性能大型项目...

所以，主要问题是，这是解决此问题的窍门，还是我应该使用saga或mobx等其他软件包来解决此问题？

谢谢

Answer 1

所有控制台日志运行的原因是因为combineReducers的工作方式……实际上是要遍历每个reducer的代码。但是，由于它驻留在switch语句中，因此大多数未执行。因此，这不会造成性能问题。

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

通常，如果在reducer的switch语句之外没有很多代码，则可以。无论如何，这都是可行的，因为使用redux-thunk时，大多数代码应该在操作中执行，而reducer只是在更改状态。

Answer 2

每次调度动作（即更改应用程序状态）时，都会调用所有reducer。

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

一个用例是：如果您有购物车减速器，购物页面减速器和购物页面。

shopping page发出一个动作，称已将商品添加到购物车。购物页面的减速器会侦听此信息并更新商品状态，并以绿色指示已将其添加到购物车

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

为什么所有redux reducer功能都在运行时执行？

2 个答案: