在 React+Redux 的应用中，多层级的组件之间的数据传递会变得非常显著。如果你在业务中仅仅只有简单的数据传输，那么很多时间可能仅仅只是通过props 和父子组件之间的串联即可实现。但是，为了处理更加复杂的应用，许多层级的组件之间必须共享状态，因此当前使用的实践是通过 Redux 的 store 来管理和传递状态。
那么，如何在 React+Redux 的应用中处理多层级组件之间的数据传递呢？
基本原则
对于 React+Redux 应用的多层级组件间的数据传递，我们需要考虑以下两点基本原则：
- 不要违反单向数据流
Redux 的アーキテクチャでは一方向のデータフローが前提です。したがって、コンポーネント間でstateを直接取得するべきではありません。その代わりに、storeからstateを取得してpropsとして渡すことが、どの親子関係の階層でも推奨されています。
- 联系快照地图
正如在设计任何程序中一样，当我们在处理多个层级的组件之间的数据传输时，我们应该尽量保持数据流转的透明性和可预测性。我们必须知道，如果我们更改了一个组件的状态，它会如何影响应用程序中的其他组件。因此，我们需要对组件之间的联系和状态变化做好记录以便于快速判断变化的重要性。
处理多层的状態传输
除了以上的两条基本原则，我们还需要考虑以下几种方式来解决多层级的组件之间的数据传递问题：
- 在顶层组件中维护状态
在 React+Redux 应用的情况下，最常用的数据管理方式是在顶层组件中维护所有的应用程序状态。这意味着在这种情况下，我们可以将状态的更新操作向下传递到应用程序中的其他组件。此外，由于 React 中可以定义一个函数，该函数可以将状态更新函数传递到子组件中，在处理传递状态的时候非常方便。
以下是一个代码示例：
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------------ ----- --
-
----------- - -- -- -
---------------- ----------- -- -- -- ------------ ------------ ----
--
-------- -
------ -
-----
------- ------------------------------ --
-------- ------------------------------------ --
------- --
------
--
-
-
----- ------ - -- ----------- -- -- -
--------
------- -------------------------- --------------
---------
--
----- ------- - -- ----------- -- -- -
-----
----------------
------------ -- ------ ---
------
--
----- ----- - -- -- -
-----
--------------
---- ------ ----- -----------
------
--
----- ------ - -- -- ------------------------在这个例子中，toggleModal 的状态被设置在顶层的App组件中，然后使用props向下传递，因此Header和Content都可以访问该状态。
- 将状态升级到Redux store中
将状态升级到 Redux store 中可以帮助我们更好地管理多层级组件之间的数据传递。因为 Redux 是一个全局状态管理器，因此顶层组件中的状态更新操作中是一个非常好的解决方案。
以下是一个简单的代码示例：
------ - -------- - ---- --------------
------ - ----------- - ---- --------
-- ------ ----- --
----- ---------- - -------------
----- ----------- - --------------
-- ------ -------- --
----- --------- - -- -- -- ----- ---------- ---
----- ---------- - -- -- -- ----- ----------- ---
-- ------- --
----- ------------ - ------ - - ------- ----- -- ------- -- -
------ ------------- -
---- -----------
------ -
---------
------- -----
--
---- ------------
------ -
---------
------- ------
--
--------
------ ------
-
--
-- ----- --
----- ----- - --------------------------
-- ---------- --
----- ------ - -- ------- -- -- -
--------
------- ---------------------- --------------
---------
--
----- ------- - -- ------ -- -- -
-----
----------------
------- -- ------ ---
------
--
----- ----- - -- ------- -- -- -
-----
--------------
---- ------ ----- -----------
------- ----------------------- --------------
------
--
----- ------ - -- -- ------------------------
----- --- - -- -- -
--------- --------------
-----
------- ----------- -- ---------------------------- --
-------- -------------------------------- --
------- --
------
-----------
--在这个例子中，我们通过使用 Redux 中的Provider和createStore函数创建了一个 Redux store。使用 Redux store，我们将状态升高到了modalReducer中，该 reducer 接收到多个 action 并返回当前 state 的下一个状态。在App 组件中，我们使用了Providercomponent而不是在应用程序代码中手动维护 store，这是一个非常好的实践。
- 使用Context传递状态
React的Context是一个非常实用的工具，可以让我们在应用程序的不同层次之间穿梭一些数据，而无需通过 props 属性显式传递。使用 context 可以更加轻松地维护应用程序的状态。
以下是一个代码示例：
------ - -------------- -------- - ---- --------
----- ------------ - --------------- ------- ----- ---
----- ------ - -- -- -
----- - ------- --------- - - -------------------------
------ -
--------
------- ------------------------ --------------
------- -- ------ ---
---------
--
--
----- ----- - -- -- -
----- - ---------- - - -------------------------
------------ -- -
----- -------- - ------- -- -
-- -------------------------------------------------- -
-------------
-
--
-------------------------------------- ----------
------ -- -- ----------------------------------------- ----------
-- ----
------ -
---- --------------------------
---- ------------------
--------------
---- ------ ----- -----------
------- -------------------------- --------------
------
------
--
--
----- ------- - -- -- -
-----
----------------
------- -- ---- ------------
------
--
----- ------ - -- -- ------------------------
----- --- - -- -- -
----- ------------ -------------- - ---------- ------- ----- ---
----- --------- - -- -- --------------- ------- ---- ---
----- ---------- - -- -- --------------- ------- ----- ---
------ -
---------------------- -------- -------------- ---------- ---------- ---
-----
------- --
-------- --
------- --
------
------------------------
--
--在这个例子中，我们使用 React 的createContext函数创建了一个 Context，然后在App组件中使用 useState hook 来跟踪模态状态并使用ModalContext.Provider component 将它传递下来。在Header和Modal组件中，我们使用了useContexthook来获取访问状态的权限。
结论
以上是一些处理 React+Redux 中多层级组件之间的数据传输的方法。尝试遵循 Redux 中的单向数据流和联系快照地图，然后选择上述的一种方式来管理你的 React 应用程序的多层级组件之间的数据传递。
如果你在使用 React+Redux 并遇到了困难，建议试试上述方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670899d9d91dce0dc872d333