React Redux 是一个在 React 应用程序中管理应用程序状态和数据流的非常流行的库。它有助于在应用程序中保持一致的状态并使应用程序更易于推理和维护。
在本篇文章中，我们将探讨 React Redux 的高级进阶内容。 我们将探索如何使用高阶组件，中间件，异步操作和更多功能来改善您的 React Redux 应用程序。
1. 高阶组件
在 React Redux 中，高阶组件是一种模式，您可以使用它来对组件进行包装并通过 props 将 state 和其他功能传递给它们。
这种模式使您可以在组件中重用代码并将它们转换为更具可重用性的组件。在 React Redux 中，高阶组件经常用于连接组件到 Redux store，并使组件能够使用 store。
以下是一个简单的高阶组件示例，其中组件被连接到 Redux store：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- --------------- - ----- -- -
------ -
------ -----------
-
-
----- -------- - -- ----- -- -- -
----
--------------- -- -
--- ------------------------------
---
-----
-
------ ------- -----------------------------------上面的代码使用 connect 函数来连接组件到 store。 mapStateToProps 函数被用来将 store 中的部分数据映射到组件的 props 上。在这个例子中，todos 状态被映射到了 TodoList 组件的 props 上。
2. 中间件
中间件是可以让 Redux store 发送异步操作的一种机制。通过使用中间件，您可以将逻辑解耦并允许您的代码进行更好的测试。
中间件允许您拦截和处理将要发往应用程序状态的操作。以下是一个简单的 Redux 日志中间件示例：
const loggerMiddleware = store => next => action => {
console.log('dispatching', action);
const result = next(action);
console.log('next state', store.getState());
return result;
};上面的代码中，我们定义了一个名为 loggerMiddleware 的函数，实际上是一个中间件函数。该函数接受一个 store 参数，该参数允许中间件访问应用程序的状态，一个 next 参数，该参数代表下一个中间件或 Redux store，以及一个 action 参数，表示将要被处理的 action。
在中间件函数内部，我们首先打印要被处理的 action。接下来，我们将 action 传递给下一个中间件或 Redux store 并获得结果。
然后我们再次打印下一个状态。最后，我们将结果返回以允许下一个中间件或 Redux store 处理。
3. 异步操作
在 React Redux 应用程序中，异步操作通常是必要的。 在 Redux 中使用异步操作时，您可以选择使用 Redux Thunk 或 Redux Saga。
Redux Thunk 是一个简单而易学的库，它允许您在 Redux 应用程序中编写异步操作。以下是一个简单的 Redux Thunk 实现：
-- -------------------- ---- -------
-- ----------
----- --------- - -- -- -
------ -------- -- -
---------- ----- --------------------- ---
---------------
-------------- -- ----------------
---------- --
---------- ----- ---------------------- -------- ---------- --
-
------------ -- ---------- ----- ---------------------- ----- ----
--
--
------ - --------- --
-- ----------
----- ------------ - -
------ ---
-------- ------
------ ----
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ -
---------
-------- ----
--
---- ----------------------
------ -
---------
-------- ------
------ --------------
--
---- ----------------------
------ -
---------
-------- ------
------ ------------
--
--------
------ ------
-
--
------ ------- -------------上面的代码展示了如何使用 Redux Thunk 来执行异步操作。注意到我们使用 dispatch 函数来发出 action，并将异步逻辑包装到我们的 loadTodos 函数中。
当 loadTodos 函数被调用时，它会向 store 发送一个 FETCH_TODOS_REQUEST action，然后执行异步逻辑。一旦数据被获取并解析为 JSON，它就会向 store 发送 FETCH_TODOS_SUCCESS action 并将 payload 数据分发给 store。
如果发生错误，则会发送 FETCH_TODOS_FAILURE action，通知 store。
结论
在本篇文章中，我们探讨了 React Redux 的高级进阶内容。我们介绍了基本的高阶组件和中间件，以及如何使用异步操作进行改进。希望这篇文章可以对您的 React Redux 应用程序的设计和开发有所帮助。
示例代码可以在这里获得。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670fb9205f5512810266fed0