Redux 是一种 JavaScript 状态管理库，用于管理 web 应用程序中的状态。它为应用程序中的数据提供统一的存储方式，并确保状态的更改始终是可预测的。尽管 Redux 本身已经是一个很强大的库，但是 Redux 生态还存在很多优秀的第三方库，使得使用 Redux 变得更加方便和简单。本文将会给大家介绍五个 Redux 相关的优秀第三方库。
1. Reselect
Reselect 是一个可缓存的选择器库，用于从 Redux 存储中选择数据。Reselect 让你可以在计算衍生数据时，对数据的变化进行保存和优化，只有在数据发生变化时才重新计算这些衍生数据。这对于优化性能非常重要，因为它避免了在每个组件渲染时都需要重新计算数据的情况。
示例代码：
-- -------------------- ---- -------
------ - -------------- - ---- ----------
----- ------- - ----- -- ----------
----- ------------- - ----- -- ----------------
----- -------- - ----- -- ----------- - --------------
----- --- - ---------------
---------
--------------
---------- ----------- -- -------- - ----------- - ----
-
----- ------------- - ---------------
--------
---------
----
------ --------- ---- -- --
--------
---------
----
------ -------- - ---
--
-在上面的代码中，我们需要计算一个购物车的总价。Reselect 帮助我们创建了一个可缓存的的选择器，该选择器从 Redux 库中读取数据，并利用 createSelector 函数创建了一个缓存函数 totalSelector。这个缓存函数计算商品小计和对应的税款，然后将这些值与购物车信息合并，最后返回购物车的总价。
2. Redux-Thunk
Redux-Thunk 是一个中间件，它允许你直接在 Redux 库中发送异步数据请求。它使得在应用程序状态改变之前，可以进行异步操作，这包括从服务器获取数据，实现动画等异步操作。Redux-Thunk 可以将异步操作的结果存储在 Redux 中，并在需要时将其提取出来。
示例代码：
const fetchData = () => async dispatch => {
const data = await fetch('/api/data')
const json = await data.json()
dispatch({
type: 'FETCH_DATA',
payload: json
})
}在上面的代码中，我们创建了一个数据请求的函数 fetchData。这个函数返回一个 thunk 函数，该 thunk 函数发出异步请求并获取数据，最后将数据分发给 Redux 库。Redux-Thunk 是一个强大的工具，因为它可以让你在状态改变之前执行异步操作，这将极大地简化应用程序的架构和代码。
3. Redux-Logger
Redux-Logger 是一个日志中间件，用于在控制台中记录 Redux 库的行为。它可以打印 Redux 库中发生的每一个动作，以及每个动作所产生的状态变化。Redux-Logger 对于调试 Redux 应用程序非常有用，它可以让你更好地了解 Redux 库中的状态和数据变化。
示例代码：
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
const store = createStore(reducer, applyMiddleware(logger))
store.dispatch({ type: 'INCREMENT' })在上面的代码中，我们创建了一个 Redux 库 store。在创建 store 时，我们将 Redux-Logger 作为中间件传递给 createStore 函数。这意味着在执行 store.dispatch 操作时，Redux-Logger 将打印信息到控制台中，从而使得调试 Redux 应用程序变得更加容易和方便。
4. Redux-Form
Redux-Form 是一个表单管理库，用于处理表单和输入验证。Redux-Form 针对表单元素进行了封装，提供类似 Redux 表单的功能，以处理表单元素的提交，验证和保存。Redux-Form 支持使用异步验证和异步提交，以及可以生成表单元素，并与 Redux 中的 state 进行绑定。
示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ --------- - ---- ------------
----- ----------- - ----- -- -
----- - ------------ - - -----
------ -
----- ------------------------
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------- -----------------------------
-------
-
-
------ ------- ----------- ----- --------- ---------------在上面的代码中，我们使用 reduxForm 函数将组件包装成一个高阶组件，该高阶组件可以从 Redux 库中获取表单状态，并将其传递给我们的 ContactForm 组件。这样可以使得我们轻松地将表单元素绑定到 Redux 库的 state，同时也使得表单元素状态的更新和管理更容易。
5. Immutable.js
Immutable.js 是一个函数式编程库，用于提供不可变数据结构。在 Redux 应用程序中，不可变性是非常重要的概念，因为它确保了状态的更改是可预测的。不可变性的数据结构不会在修改时发生变化，而是会创建一个新的数据结构，从而保证了数据的不可变性。Immutable.js 提供了很多种不可变数据类型，如 List、Map、Set 等等，使得更改状态成为一个无缝体验。
示例代码：
import { Map } from 'immutable'
const map1 = Map({ a: 1, b: 2, c: 3 })
const map2 = map1.set('b', 50)
console.log(map1.get('b')) // 2
console.log(map2.get('b')) // 50在上面的代码中，我们使用 Immutable.js 的 Map 函数创建了一个不可变 Map 对象，它包含了 a、b、c 值。然后我们使用 set 函数修改 b 的值为 50，并将结果保存为一个新的 Map 对象。在这个过程中，map1 对象并没有改变，而是创建了一个新的 map2 对象，从而保证了数据的不可变性，这使得在 Redux 应用程序中更改状态成为了一种无缝体验。
结论
Redux 生态系统中存在许多优秀的第三方库，这些库大大简化了 Redux 应用程序的开发和调试过程，也更加完善了 Redux 应用程序的功能和性能。上述的五个库是这个生态系统中最重要和最有用的五个库之一，它们促进了开发和管理 Redux 应用程序的状态，从而使得我们变得更加高效，简单和精确。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672320bc2e7021665e0e769f