介绍
heliosplus 是一个基于 Redux 的 React 应用程序开发库。它允许您通过简单的代码和少量的配置来构建可扩展和易维护的 web 应用程序。
安装
我们建议您使用 npm 安装 heliosplus：
npm install heliosplus --save
安装完成之后，您可以在您的应用程序中导入 heliosplus：
import heliosplus from 'heliosplus';
使用
创建 Redux Store
在使用 heliosplus 之前，您需要先创建 Redux Store：
import { createStore } from 'redux';
import { heliosplusReducer } from 'heliosplus';
const store = createStore(heliosplusReducer);创建 Heliosplus 应用
然后，您可以使用 heliosplus 函数来创建一个 Heliosplus 应用：
-- -------------------- ---- -------
------ - ---------- - ---- -------------
----- --- - ------------
------
------ -
-- --- ---- ----- ----
--
------------ -
-- --- ---- ----------- ----
--
---------- -
-- --- ---- --------- ----
-
---在 views、middlewares 和 enhancers 中指定的参数将被传递给 react-redux 的 Provider、applyMiddleware 和 compose 函数。
创建和渲染视图
使用 app.createView() 函数可以创建一个视图：
-- -------------------- ---- -------
----- ------ - ----------------
----- ---------
-------- -
-- --- ------- ---- ------ -- ---- ---- ----
--
-------- ------- ------- -- -
-- --- ------- --- ---- ---- ----
--
---------- -- -- -
-- --- --------- --- ---- ---- ----
-
---将视图渲染到 DOM 中，您可以像这样使用 ReactDOM.render()：
import ReactDOM from 'react-dom';
ReactDOM.render(<MyView />, document.getElementById('root'));视图之间的通信
Heliosplus 倡导视图之间的松耦合。在一个视图中引用另一个视图表示耦合度更高，您可以使用 Redux 的 action 和 reducer 进行通信。
-- -------------------- ---- -------
------ - ------------- ------------- - ---- --------
-- ------- ------ --- ------- --- --- ----- ----
----- --------------- - --------------------------
----- ---------------- - --------------------------- -
------------------ ------- ------- -- --
---------
-------- ------------- - -
--
---
-- -------- --- ------ ---- ---- ----
----- ------ - ----------------
----- ---------
-------- -
----------------- -- -- ---------------------------
--
-------- ------- ------- -- -
------ ------------- -
-- --- ----- -------- --- ---- ----
---- ------------
------ -
---------
-------- ------------- - -
--
--------
------ ------
-
--
---------- -- ------ ------- -- -- -
-- --- --------- --- ---- ---- ----
-
---中间件
您可以在 heliosplus 函数中指定中间件以进行更高阶的操作：
-- -------------------- ---- -------
------ - ------------ - ---- ---------------
----- ---------------- - ---------------
----- --- - ------------
------
------ -
-- --- ---- ----- ----
--
------------ -------------------
---------- -
-- --- ---- --------- ----
-
---增强器
您还可以在 heliosplus 函数中指定增强器以进行更高阶的操作：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- --------- - --------------------
----- --- - ------------
------
------ -
-- --- ---- ----- ----
--
------------ -
-- --- ---- ----------- ----
--
---------- -----------
---示例代码
以下示例代码展示了如何使用 Heliosplus 创建一个简单的计数器应用程序。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------------ ---------- - ---- -------------
------ ----- ---- --------
------ -------- ---- ------------
----- ----- - -------------------------------
----- --- - ------------
------
------ ---
------------ ---
---------- --
---
----- ----------- - ----------------
----- --------------
-------- -
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- --
--
-------- ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
---------- -- ------ ------- -- -- -
-----
----------------
--------------------
------- --------------------------------------
------- --------------------------------------
------
-
---
---------------------------- --- ---------------------------------结论
Heliosplus 是一个快速、简单和容易扩展的 React 应用程序开发库。它遵循 Redux 的设计哲学，提供了一种优雅的方式来构建 web 应用程序。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a1f81e8991b448d7c11