在前端开发中，我们经常需要使用库或框架来提高开发效率和代码质量。其中，redux-connected-ui 包就是一个很好的库，它可以让我们更加轻松地使用 Redux 和 React 构建复杂的 UI 应用程序。本文将介绍 redux-connected-ui 的使用方式，包括安装、应用和示例代码。
安装
安装 redux-connected-ui 包非常简单，我们只需要执行下面的命令即可：
npm install --save redux-connected-ui
应用
使用 redux-connected-ui 包的第一步是将其引入到项目中。在 React 应用程序中，我们通常会使用 ES6 的 import 语句来引入库：
import RCU from 'redux-connected-ui';
接下来，我们需要将 redux-connected-ui 提供的 Reducer 函数和 Middleware 函数与应用程序的 Redux Store 对象集成起来。在创建 Store 对象时，我们可以这样写：
const store = createStore(
combineReducers({
...reducers,
rcu: RCU.reducer,
}),
applyMiddleware(RCU.middleware)
);这里的 reducers 是一个包含所有自定义 Reducer 函数的对象。我们将 redux-connected-ui 的 Reducer 函数也添加到了这个对象中，放在了键名为 rcu 的属性中。同时，在 applyMiddleware 函数中，我们添加了 redux-connected-ui 提供的 Middleware 函数。
现在，我们的 Redux Store 对象就已经与 redux-connected-ui 集成起来了。接着，我们需要在应用程序的根组件中调用 RCU 组件：
-- -------------------- ---- -------
------ - --- - ---- ---------------------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
---- --
--- ---- ---
------
--
-
-最后，我们还需要在 index.js 文件中渲染应用程序的根组件：
ReactDOM.render(<App />, document.getElementById('root'));这样，我们就完成了 redux-connected-ui 包的使用。
示例代码
下面是一个简单的示例代码，使用了 redux-connected-ui 包和 React-Redux 库。
首先，我们需要创建一个名为 todos 的 Redux Store。在 reducers.js 文件中，我们可以这样写：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ --- ---- ---------------------
----- ----- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ -
---------
-
--- ----------
----- ------------
---------- ------
-
--
---- --------------
------ -------------- --
-------- --- ----------
- - -------- ---------- --------------- -
- ----
--
--------
------ ------
-
--
------ ------- -----------------
---- ------------
------
---这里，我们将 redux-connected-ui 的 Reducer 函数添加到了 reducers 对象中，并创建了一个名为 todos 的 Reducer 函数。
然后，在 actions.js 文件中，我们定义了两个 Action Creator 函数，分别用于添加和切换 Todo 项目的完成状态：
-- -------------------- ---- ------- --- ---------- - -- ------ ----- ------- - ---- -- -- ----- ----------- --- ------------- ----- --- ------ ----- ---------- - -- -- -- ----- -------------- --- ---
接着，在 index.js 文件中，我们创建了 Redux Store 对象，调用了 ReactDOM.render 函数渲染根组件，并将 Redux Store 对象与根组件进行了绑定，并使用 react-redux 库提供的 Provider 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ -------- ---- -------------
------ --- ---- ---------------------
------ --- ---- -------------------
----- ----- - --------------------- ---------------------------------
----------------
--------- --------------
-----
---- --
---- --
------
------------
-------------------------------
--最后，在应用程序的主要组件 App.js 中，我们使用了 redux-connected-ui 包提供的 Form 和 List 组件，并在 onSubmit 回调函数中 dispatch 了一个添加 Todo 项目的 Action：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- -------------
------ - ----- ---- - ---- ---------------------
----- --- - -- -------- -- -- -
-----
-------- ---------
----- ------------------- ------------------ ---- ----- --
----- --
------
--
----- ------------------ - -------- -- --
--------- ---- -- ------------------------
---
------ ------- ------------- -------------------------到此为止，我们就已经完成了一个简单的 Todo List 应用程序的开发，其中使用了 redux-connected-ui 包与 React-Redux 库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583b77