谐波减速器 rv减速器_使用createReducer（）减少减速器样板

谐波减速器 rv减速器

by Bhuvan Malik

通过布凡·马利克(Bhuvan Malik)

使用createReducer()减少减速器样板 (Reducing the Reducer Boilerplate With createReducer())

First, a quick recap of what reducers in Redux are:

首先，快速回顾一下Redux中的减速器：

Reducers are nothing but pure functions that take in the previous state and an action and return the new state.

精简器只不过是接受先前状态和操作并返回新状态的纯函数。

Two things to keep in mind are that they are pure and therefore don’t mutate the state.

需要牢记的两件事是它们是纯净的 ，因此不会改变状态 。

With that out of the way, let’s get down to business.

有了这一切，让我们开始做生意。

When we start with redux, this is how we write a reducer:

当我们从redux开始时，这就是我们编写reducer的方式：

We have a search reducer which updates the state on the basis of different actions like setting the search results, updating the search string or changing state of a loader/spinner. Let’s assume it to be a slice reducer, which we can combine later using the combineReducers(reducers) function.

我们有一个搜索简化程序，它根据不同的操作(例如设置搜索结果，更新搜索字符串或更改加载程序/旋转程序的状态)来更新状态。 让我们假设它是切片 combineReducers(reducers) 器 ，稍后我们可以使用combineReducers(reducers)函数进行合并。

Now, if you’re like me, you may not fancy switch statements ?

现在，如果您像我一样，可能不喜欢switch语句？

They come with too much boilerplate of their own. A reducer handling many action types using switch cases would be lengthy. And that wouldn’t look good now, would it?! The idea is to ditch the switch and move towards a more functional approach.

他们带有太多自己的样板。 使用切换器来处理许多动作类型的减速器会很长。 而且现在看起来不太好，对吗？ 这样做的想法是放弃开关，朝着功能更强的方法迈进。

让我们重新考虑一下 (Let’s rethink this a little)

What we can do is abstract all our switch case logic into “case functions” and create an object that maps action types to their corresponding case functions. We’ll call this object ‘actionHandlers’.Below is the object:

我们可以做的是将所有开关案例逻辑抽象为“案例函数”，并创建一个将操作类型映射到其相应案例函数的对象。 我们称这个对象为'actionHandlers'，下面是这个对象：

As you can see, we now have a mapping from action types to case functions.

如您所见，现在我们有了从动作类型到案例函数的映射。

Case functions are like small reducer functions that take state and incoming action as arguments and return a new slice of the state tree.

案例函数就像小型化简函数一样，将状态和传入操作作为参数并返回状态树的新切片。

Now we must create a “reducer creator” function to make use of our actionHandlers . This function will return another function which will actually be our reducer passed to combineReducers(). Behold:

现在，我们必须创建一个“ reducer creator”函数来利用我们的actionHandlers 。 该函数将返回另一个函数，该函数实际上将是我们传递给combineReducers() reducer。 看哪：

As you can see, createReducer() is a closure returning another function. This returned function satisfies the form (previousState, action) => newState and is therefore going to be our actual slice reducer.

如您所见， createReducer()是一个返回另一个函数的闭包。 这个返回的函数满足形式(previousState, action) => newSt ate，因此将成为我们实际的切片(previousState, action) => newSt器。

The returned reducer function can access both actionHandlers and initialState arguments of it’s enclosing function because of the closure. The initialState is used as the default argument for state . Inside the reducer function, we check if our actionHandlers has a property matching the incoming action type. If so, we execute that case function inside actionHandlers, passing in state and action. If the action type is not a property inside actionHandlers, we return the previous state.

由于关闭，返回的reducer函数可以访问其封闭函数的actionHandlers和initialState参数。 initialState用作state的默认参数。 在reducer函数内部，我们检查actionHandlers是否具有与传入操作类型匹配的属性。 如果是这样，我们在actionHandlers内部执行该case函数，并传入状态和action。 如果操作类型不是actionHandlers内的属性，则返回前一个状态。

You can find createReducer() in the official Redux docs as well.

您也可以在官方Redux文档中找到createReducer() 。

This create reducer function can now be imported in different reducer files to create all our slice reducers!

现在可以将这个create reducer函数导入不同的reducer文件中，以创建我们所有的slice reducer！

The above function is verbose right now for explanation point of view. Let’s spice things up a bit! Below is the new and improved create reducer file. ?

出于解释的观点，上述功能现在很详细。 让我们加点香料吧！ 以下是新的和改进的create reducer文件。 ？

I’ve shortened everything using lambdas and Ramda library’s ‘propOr’ function. What the propOr function does is take the 2nd argument (a key) to check inside the 3rd argument (an object), and returns its value if found. Otherwise, it returns the default supplied from the 1st argument. The 1st argument, ‘identity’, is a function that just returns the parameter supplied to it.

我已经使用lambda和Ramda库的' propOr '函数缩短了所有内容。 propOr函数的作用是使用第二个参数(一个键)检查第三个参数(一个对象)的内部，并在找到后返回其值。 否则，它将返回从第一个参数提供的默认值。 第一个参数' identity '是仅返回提供给它的参数的函数。

So, a function is returned if found in actionHandlers which is executed using (state, action. In case the action is not found, propOr returns identity, which is executed with the same (state, action) arguments and returns the first argument supplied, which is state(the previous state in this case).

因此，如果在actionHandlers中找到函数，则返回一个函数，该函数使用(state, action 。如果未找到该动作，则propOr返回identity，该identity使用相同的(state, action)参数执行，并返回提供的第一个参数，这是state (在这种情况下为先前状态)。

You can create your own ‘propOr’ and ‘identity’ functions, Ramda is just what I use.

您可以创建自己的“ propOr”和“ identity”函数，Ramda正是我所使用的。

Let me show the new search reducer file for you to get the overall picture of how we use our createReducer function with the actionHandlers.

让我向您展示新的搜索actionHandlers文件，以了解如何将我们的createReducer函数与actionHandlers 。

The createReducer function is partially applied and returns our final slice reducer and is exported to a file where we use the combineReducers function.

createReducer函数被部分应用，并返回我们最终的切片combineReducers器，并被导出到我们使用combineReducers函数的文件中。

Well, there you go, a good way for creating reducers and reducing the overall boilerplate. I hope this benefits you in some way :)

好了，这是创建异径管和减少整体样板的好方法。 我希望这可以使您受益：)

Here are some links to my previous articles:

这是我以前的文章的一些链接：

JavaScript ES6 Functions: The Good PartsES6 offers some cool new functional features that make programming in JavaScript much more flexible. Let’s talk about…medium.freecodecamp.comA guide to JavaScript variable hoisting ? with let and constNew JavaScript developers often have a hard time understanding the unique behaviour of variable/function hoisting.medium.freecodecamp.com

JavaScript ES6功能：优良的部分 ES6提供了一些很酷的新功能，使JavaScript编程更加灵活。 让我们谈谈… medium.freecodecamp.com JavaScript变量提升指南？ 使用let和const NewJavaScript开发人员通常很难理解变量/函数hoisting.m的独特行为 。edium.freecodecamp.com

Peace ✌️

和平✌️

翻译自: https://www.freecodecamp.org/news/reducing-the-reducer-boilerplate-with-createreducer-86c46a47f3e2/

谐波减速器 rv减速器