raunch 是一款适用于 React 前端开发的 npm 包，可以方便地快速构建基于 Redux 的代码框架。在本文中，我们将详细讲解如何使用 raunch。
安装
首先需要安装 raunch，可以使用以下命令：
--- ------- ------
配置
在使用 raunch 之前，还需要安装一些相关的包和进行一些简单的配置。首先，需要安装 redux、react-redux 和 redux-thunk：
--- ------- ----- ----------- -----------
接下来，需要在 index.js 文件中进行配置：
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----------- ---- -------------------
------ ----- ---- --------------
------ --- ---- -------------------
----- ----- - ------------------------ ------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，首先导入了必要的包，包括 Provider、createStore、applyMiddleware 和 react-thunk。然后创建了 Redux 的 store，并将其传递给 Provider 组件，最后将 App 组件渲染到了页面中。
使用
一旦完成了配置，就可以开始使用 raunch 提供的功能了。在 src 目录下，先创建 actions 和 reducers 两个文件夹，分别用于存放 Action 和 Reducer 相关的代码。
创建 Action
在 actions 文件夹中创建一个名为 index.js 的文件，并在其中定义 Action：
------ ----- ------- - ------ -- -
------ -
----- -----------
-------- ----
-
-
------ ----- ---------- - ---- -- -
------ -
----- --------------
-------- --
-
-在上面的代码中，定义了两个 Action，分别是 addItem 和 deleteItem。这两个 Action 分别用于添加和删除一个元素。
创建 Reducer
在 reducers 文件夹中创建一个名为 index.js 的文件，并在其中定义 Reducer：
----- ------------ - -
----- --
--
----- ----------- - ------ - ------------- ------- -- -
------------------- -
---- -----------
------ -
---------
----- --------------- ---------------
-
---- --------------
------ -
---------
----- -------------------------- -- ------- --- ----------------
-
--------
------ ------
-
-
------ ------- ------------在上面的代码中，首先定义了初始状态 initialState，包含了一个名为 list 的数组。然后定义了 rootReducer，用于管理整个应用的 state。在 reducer 中，根据传入的 action 的不同，更新应用的 state，最终返回更新后的 state。
使用 Connect
在 components 文件夹中创建一个名为 ItemList 的组件，并将其连接到 Redux store：
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------- ---------- - ---- -------------------
----- -------- ------- --------- -
------------------ -
-------------
---------- - -
--------- --
--
-
------------ - --- -- -
--------------- --------- -------------- ---
-
------------- - -- -- -
----- ------- - - --- ----------- ------ ------------------- --
----------------------------
--------------- --------- -- ---
-
---------------- - ---- -- -
--------------------------
-
-------- -
------ -
-----
----
------------------------- -- -
------ -
--- --------------
-------------------------
------- ----------- -- -----------------------------------------------
-----
-
---
-----
------ ----------- --------------------------- ---------------------------- --
------- -----------------------------------------
------
-
-
-
----- --------------- - ------- -- -
------ -
----- ----------
-
-
----- ------------------ - -- -- -
------ -
--------
----------
-
-
------ ------- ------------------------ --------------------------------在上面的代码中，首先导入了 connect 方法，并将 ItemList 组件作为参数。然后通过 mapStateToProps 方法将 store 中的 state 映射到组件的 props 中，通过 mapDispatchToProps 方法将 Action 映射到组件的 props 中。最后，使用 connect 方法将 ItemList 组件连接到 store 中，并导出到其他文件中使用。
示例代码
最后，为了帮助更好地理解 raunch 的使用方法，我们还提供了一个完整的示例代码：
-- ------
------ ------ - --------- - ---- --------
------ -------- ---- ------------------------
----- --- ------- --------- -
-------- -
------ -
-----
--------- --
------
-
-
-
------ ------- ------ ----------------
------ ----- ------- - ------ -- -
------ -
----- -----------
-------- ----
-
-
------ ----- ---------- - ---- -- -
------ -
----- --------------
-------- --
-
--- -----------------
----- ------------ - -
----- --
--
----- ----------- - ------ - ------------- ------- -- -
------------------- -
---- -----------
------ -
---------
----- --------------- ---------------
-
---- --------------
------ -
---------
----- -------------------------- -- ------- --- ----------------
-
--------
------ ------
-
-
------ ------- -------------- ----------------------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------- ---------- - ---- -------------------
----- -------- ------- --------- -
------------------ -
-------------
---------- - -
--------- --
--
-
------------ - --- -- -
--------------- --------- -------------- ---
-
------------- - -- -- -
----- ------- - - --- ----------- ------ ------------------- --
----------------------------
--------------- --------- -- ---
-
---------------- - ---- -- -
--------------------------
-
-------- -
------ -
-----
----
------------------------- -- -
------ -
--- --------------
-------------------------
------- ----------- -- -----------------------------------------------
-----
-
---
-----
------ ----------- --------------------------- ---------------------------- --
------- -----------------------------------------
------
-
-
-
----- --------------- - ------- -- -
------ -
----- ----------
-
-
----- ------------------ - -- -- -
------ -
--------
----------
-
-
------ ------- ------------------------ --------------------------------总结
raunch 是一款非常方便的 npm 包，为 React 前端开发提供了便捷的 Redux 框架搭建。通过本文，你已经可以基本了解 raunch 的用法及其优点，希望可以帮助到各位开发者。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557ff81e8991b448d5205