Legendary

Redux基础:什么是Reducer

Legendary · 2017-01-09翻译 · 268阅读 原文链接

当在用Redux管理一个应用的状态时候,一个核心概念之一就是Reducer这个函数。但是什么是Reducer呢?为什么它叫做这个名字?正如我们可以找到的那样,对于Redux来说答案并不是唯一的,这反映了一个很有用的模式,并且这个模式可以被应用在很多的非Redux的Javascript上,甚至是在很多其他的语言上。

将列表减少到单个值

在函数式编程里的一个核心思想,就是我们应该使用简单的、纯的、可组合的函数去从一组值的集合中提取我们所需要的信息。 说明这个概念的一个非常简单的例子就是,循环一个数组的所有值然后将它们加起来。下面就可能是在Javascript中最常用的解决方法:

const list = [1, 2, 3];

let sum = 0;

for (let i = 0; i < list.length; i++) {
    sum = sum + list[i];
}

console.log(sum); // 6

但是如果我想要去写一个把数字加在一起的函数,以便可以在很多不同的场合重用它呢?我们可以写一个add的函数,并更新一下上面的循环来调用它。

const list = [1, 2, 3];

function add(a, b) {
    return a + b;
}

let sum = 0;

for (let i = 0; i < list.length; i++) {
    sum = add(sum, list[i]);
}

console.log(sum); // 6

这是有帮助的,但是对于我们经常要这么做来说,那个for循环就显得有点冗余。Array.prototype.reduce来救你了!这是一个在数组上运行的函数,传入一个函数和一个初始值作为参数,并对每个值运行该函数,并将其值降低到一个单一值:

const list = [1, 2, 3];

function add(a, b) {
    return a + b;
}

const sum = list.reduce(add, 0);

console.log(sum); // 6

更少行数的代码,提高了可读性,而且这是一个可重用的函数。赢得所有。

这与Redux有什么关系?

我们只是确定了reducer是一个简单的方法,它接受两个值,并将它们减少到一个值。这就是一个reducer函数,即使是在Redux中。它只是这样发生,Redux中的reducer的两个值是当前的状态和一个可能会(或可能不会!)更新该状态的操作。

function counter(state = 0, action) {
    if (action.type === 'ADD') {
        return state + action.value;
    }
    return state;
}

在上面的例子中,我们的reducer是一个计数器,它接受两个值:一个state值 - 如果没有提供则设置为0,一个是带有typevalue属性的action对象。该函数将这两个值减小到一个新的值,Redux将把它存储为计数器的新状态。如果这个action的type不是ADD,它将返回现有状态。 就是这样!这就是一个reducer所做的。在我的下一篇文章中,我们将看看如何通过将多个reducer组合在一起来,以便在Redux store中将多个状态组合在一起。

但是首先...

Reducer有什么特别的吗? 它就只是个函数.

事实上,它只是一个函数而已!一个很好地完成一件事情并且没有副作用的,易于构建,维护和单元测试的简单方法。如果你要构建具有高度交互性并且需要大量业务逻辑来跟踪状态的应用程序,这种简单性将有助于确保你能够以高度的信心和灵活性快速构建,改进和更改应用程序。 我们也将在后续讨论更多这个话题!

相关文章