为了让前端代码更易于维护和复用，我们需要使用一些框架来帮助我们实现这些目标。其中，Redux 就是一个很好的工具，因为它可以让我们通过数据流来管理应用程序的状态，从而更好地控制应用程序的行为。在本文中，我们将探讨如何使用 Redux 来设计可复用的 UI 组件。
Redux 规范
在设计可复用的 UI 组件时，我们首先需要遵循 Redux 规范。Redux 是一个用于JavaScript应用程序的可预测状态容器，它可以使状态管理变得简单易懂。在 Redux 中，应用程序的状态存储在一个单一的状态对象中，该对象是由多个不可变的子状态组成的。
Redux 规范有三个重要的概念：Action、Reducer 和 Store。Action 描述了应用程序中发生的事件，Reducer 则描述了如何修改应用程序的状态，而 Store 则是应用程序状态的单一存储区域。
使用 Redux 创建可复用的 UI 组件
在设计可复用的 UI 组件时，我们需要严格按照 React 和 Redux 规范来实现。以下是一些关键概念：
1. 使用 Presentational 组件
一个 Presentational 组件是一个无状态组件，它只关心 UI 的展示，不关心任何业务逻辑。我们可以将 Presentational 组件与 Redux 集成，从而实现可复用的 UI 组件。
以下是一个基本的 Presentational 组件模板：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------------ -
----- - ------ - - ------
------ -
-----
- ------ -
------
--
-2. 定义 Action
Action 是用于描述应用程序中发生的事件的对象。它必须包含一个 type 属性，表示事件类型，以及与事件相关的其他属性。
在设计可复用的组件时，我们需要定义与组件相关的 Actions。这些 Actions 应该描述组件中可能发生的事件，例如用户的输入、组件的加载等。
以下是一个示例 Action：
const MY_ACTION = 'MY_ACTION';
export function myAction(payload) {
return {
type: MY_ACTION,
payload,
};
}在上面的示例中，我们定义了一个名为 MY_ACTION 的 Action，并在 myAction 函数中创建了 Action 对象。
3. 使用 Reducer
Reducer 是一个函数，用于描述如何修改应用程序的状态。Reduer 必须是纯函数，也就是说，它必须返回一个新的状态，而不能直接修改传入的状态。每个 Reducer 接收一个初始状态对象和一个 Action 对象，返回一个新的状态对象。
在设计可复用的组件时，我们需要定义与组件相关的 Reducers。
以下是一个示例 Reducer：
-- -------------------- ---- -------
------ - --------- - ---- -------------
----- ------------ - -
-------- ---
--
------ ------- -------- --------------- - ------------- ------- -
------ ------------- -
---- ----------
------ -
---------
-------- ---------------
--
--------
------ ------
-
-在这个示例中，我们定义了一个名为 myReducer 的 Reducer，用于修改应用程序的状态。在这个 Reducer 中，我们使用一个 switch 语句来选择适当的处理程序，根据 Action 的类型来更新应用程序的状态。
4. 使用 Store
Store 是应用程序状态的单一存储区域，它用于管理应用程序中的所有状态。在 Redux 中，我们可以使用 createStore 函数创建一个 Store。
在设计可复用的组件时，我们需要定义与组件相关的 Store。
以下是一个示例 Store：
import { createStore } from 'redux';
import myReducer from './reducers/myReducer';
const store = createStore(myReducer);
export default store;在这个示例中，我们创建了一个名为 store 的 Store 对象，并使用 myReducer 函数来初始化其状态。
5. 在组件中使用 Redux
现在，我们已经定义了一个 Presentational 组件、一个（或多个）与组件相关的 Action、一个与组件相关的 Reducer 和一个与组件相关的 Store，现在我们可以将它们组合在一起使用。
以下是一个示例 Presentational 组件，它从 Store 中获取一个名称，并在页面上渲染出来：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
------ ------- -------- ------------- -
----- ---- - ----------------- -- --------------------
------ -
-----
- ---- -
------
--
-在上面的示例中，我们使用 useSelector 钩子函数从 Store 中获取 myState.name 的值，并将其渲染到页面上。
6. 绑定 Action 和 Reducer
最后，在我们将组件与 Redux 集成起来之前，我们需要将 Action 和 Reducer 绑定在一起。我们可以使用 combineReducers 函数将多个 Reducer 组合成一个 Root Reducer，并将其传递给 createStore 函数。
以下是一个示例代码，用于将 myReducer 绑定在一起：
import { combineReducers } from 'redux';
import myReducer from './reducers/myReducer';
const rootReducer = combineReducers({
myState: myReducer,
});
export default rootReducer;在上面的示例中，我们将 myReducer 函数绑定到名为 myState 的对象中，并将它们组合成一个 Root Reducer。
总结
在本文中，我们探讨了如何使用 Redux 重构我们的 UI 组件。我们学习了 Redux 规范的关键概念，包括 Action、Reducer 和 Store，并且演示了如何将它们组合在一起，以构建可复用的、易于维护的 UI 组件。
使用 Redux 可以使我们更好地控制应用程序的状态，以及将业务逻辑与 UI 组件分离。通过遵循以上几个步骤，您可以轻松地重构您的 UI 组件，并实现更好的代码复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c20af083d39b488162a9b2