什么是 inferno-redux？
inferno-redux 是基于 inferno （一种类 React 的 UI 库）和 Redux（一个 JavaScript 状态管理库）的前端解决方案。它提供了一些强大的工具，使得应用程序的状态管理更加容易和直观。
安装 inferno-redux
如果你已经有一个现有的项目，并且想要使用 inferno-redux 来管理你的应用程序状态，那么你需要执行以下步骤：
- 安装 inferno-redux：
--- ------- ------ -------------
- 在你的应用程序中引入 Provider 组件：
------ - -------- - ---- ---------------
------ ----- ---- ---------
----------------
--------- --------------
---- --
------------
-------------------------------
-使用 inferno-redux
使用 inferno-redux 可以分为以下几个步骤：
- 创建一个 Redux store
------ - ----------- - ---- ------- ------ ----------- ---- ------------ ----- ----- - ------------------------
- 定义一个 React 组件，将 state 和 action 分发到组件的 props 中：
------ - ------- - ---- ---------------
------ - ----------------- ---------------- - ---- ------------
-------- --------- ------ ---------- --------- -- -
------ -
-----
--------------
------- ------------------------------
------- ------------------------------
------
-
-
----- --------------- - ------- -- --
------ -----------
--
----- ------------------ - -
---------- -----------------
---------- ----------------
-
------ ------- ------------------------ ----------------------------- 在组件中使用 props：
------ ------- ---- -----------
-------- ----- -
------ -
-----
------ --------
-------- --
------
-
-
------ ------- ---指导意义
inferno-redux 可以帮助你更轻松地管理你的应用程序状态，并将其分发到 React 组件中。通过连接 Redux store 和 React 组件，你可以更好地组织和重用代码，使得代码更加易于维护和扩展。
当你使用 inferno-redux 时，你需要注意以下几点：
- 始终将所有数据存储在 Redux store 中，而不是组件状态中。
- 在应用程序中只使用一个 Redux store。
- 使用 mapStateToProps 和 mapDispatchToProps 函数将 state 和 action 分发到组件的 props 中。
- 尽可能地避免在 mapDispatchToProps 中编写复杂的逻辑，如果必须要编写，请将该逻辑提取为另一个函数。
示例代码
下面是一个简单的示例，演示了如何使用 inferno-redux 来创建一个计数器应用程序。
actions.js
------ ----- ----------------- - ------------------- ------ ----- ----------------- - ------------------- ------ -------- ------------------ - ------ - ----- ----------------- - - ------ -------- ------------------ - ------ - ----- ----------------- - -
reducers.js
------ - --------------- - ---- -------
------ - ------------------ ----------------- - ---- -----------
-------- ----------- - -- ------- -
------ ------------- -
---- ------------------
------ ----- - -
---- ------------------
------ ----- - -
--------
------ -----
-
-
------ ------- ----------------- ----- --index.jsx
------ ----------------
------ ------- ---- ---------
------ - -------- - ---- ---------------
------ - ----------- - ---- -------
------ ----------- ---- ------------
------ ------- ---- ----------------------
----- ----- - ------------------------
---------------
--------- --------------
-------- --
------------
-------------------------------
-Counter.jsx
------ - ------- - ---- ---------------
------ - ----------------- ---------------- - ---- ------------
-------- --------- ------ ---------- --------- -- -
------ -
-----
-
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------