前言
redux是现在前端最流行的状态管理库之一，它在我们日常开发中扮演着不可或缺的角色。而在redux中，reducer是核心部分，用于改变状态树的状态。因此，如何编写出易维护和优雅的reducer是每一个redux使用者必经之路。而reduxr-reducer-helpers这个npm库则提供了一种轻量简洁的方式来编写redux reducer函数，并可以使我们避免编写重复的样板代码。在本篇文章中，我们将学习如何使用reduxr-reducer-helpers。
安装
首先，我们需要安装reduxr-reducer-helpers：
npm install reduxr-reducer-helpers --save
或者使用yarn进行安装：
yarn add reduxr-reducer-helpers
使用
reduxr-reducer-helpers的使用非常简单和直观，你可以根据你的需求进行灵活的应用。
首先，我们需要使用createReducer函数来创建一个reducer。createReducer接收一个初始状态作为参数，并返回一个reducer函数。例如：
import { createReducer } from 'reduxr-reducer-helpers';
const initialState = {
count: 0
}
const reducer = createReducer(initialState);在上面的示例中，我们使用createReducer函数创建了一个reducer函数，并将初始状态设置为{ count: 0 }。
接下来，我们可以添加action处理程序到reducer中。在reduxr-reducer-helpers中，action处理程序是一个map，它将action.type作为key，相应的处理程序作为value。例如：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
----- ------------ - -
------ -
-
----- ------- - --------------------------- -
------------------ ------- ------- -- -
------ - --------- ------ ----------- - - --
-
---
------ ------- --------在上面的示例中，当我们dispatch一个类型为INCREMENT_COUNT的action时，我们的reducer就会执行对应的处理程序，并将state中的count加1。我们可以通过return返回一个新的state对象。注意，我们在这里使用了ES6对象展开运算符，以确保reducer函数返回的新state对象是新的而不是原来的。
最后，我们将创建的reducer与redux store进行关联，并在应用中使用:
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;指南
使用reduxr-reducer-helpers的好处在于其简洁和易于维护性。然而，在使用之前，我们需要理解reducer、action和state之间的关系。
在redux中，state是被存储在一个单一的对象中的，并且它是只读的。当我们想要改变这个对象中的某些部分时，我们使用action来描述它们。而要更改状态，我们需要使用reducer函数。在reduxr-reducer-helpers中，我们使用一个简洁的方式来编写reducer函数，即将处理程序放在一个对象中，并将它们传递给createReducer函数。
示例
下面，我们将通过一个示例来演示如何在实际应用中使用reduxr-reducer-helpers。
我们将创建一个应用程序，它负责管理一个包含两个值的状态对象：
{
firstName: '',
lastName: ''
}我们将使用action来更新这两个值。我们将有两个action：SET_FIRST_NAME和SET_LAST_NAME。
-- -------------------- ---- -------
----- ------------ - ----------- -- -
------ -
----- -----------------
---------
-
-
----- ----------- - ---------- -- -
------ -
----- ----------------
--------
-
-我们将使用reduxr-reducer-helpers来创建一个reducer函数：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
----- ----------- - -
---------- ---
--------- --
-
----- ------- - --------------------------- -
----------------- ------- ------- -- --
---------
---------- ----------------
---
---------------- ------- ------- -- --
---------
--------- ---------------
--
---
------ ------- --------现在我们已经拥有一个使用reduxr-reducer-helpers编写的reducer了。我们可以使用它来创建一个store，并将它添加到我们的应用程序中：
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
store.subscribe(() => {
console.log(store.getState());
});最后，当点击按钮时，我们将分派setFirstName和setLastName action：
document.querySelector('#firstName').addEventListener('change', (event) => {
store.dispatch(setFirstName(event.target.value));
});
document.querySelector('#lastName').addEventListener('change', (event) => {
store.dispatch(setLastName(event.target.value));
});现在每当文本框中的值发生变化时，我们的应用程序就会更新我们的状态对象并将其打印到控制台上。
结论
redux是现在前端中最流行的状态管理库之一，而reducer是其核心部分之一。在使用redux时，如何编写易于维护和优雅的reducer是我们每个redux使用者必不可少的一部分。而在本文中，我们学习了如何使用npm包reduxr-reducer-helpers来简化redux reducer函数的编写，希望这篇文章能对你有所帮助，并为你的日常开发带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d4a