介绍
redux-breakpoint 是一个用于处理响应式设计的 redux 中间件。它允许您在 Redux store 中轻松地跟踪当前视窗尺寸并将响应式行为与 redux 状态相关联。本教程将为您提供一些资源和指令，帮助您充分利用该工具。
安装
要安装 npm 包 redux-breakpoint，请在终端中运行以下命令：
npm install redux-breakpoint
使用
在您安装 redux-breakpoint 完成后，可以按照以下步骤进行使用：
1.导入
您必须在需要使用 redux-breakpoint 的文件中导入它：
import {
BreakpointProvider,
setBreakpoints,
setDefaultBreakpoint
} from 'redux-breakpoint'2. 配置中间件
-- -------------------- ---- -------
----- ----------- - -
------- ----
------- ----
-------- ----
------------- -----
-
----- ------------------ - -------------------------------- ---------------------
----- ----------------- - --------------------------- ------------------------
----- ------- - -----------------
----- ------------
--------
----------- -----------------
--
----- ----- - -------------------- ------------------
-------------------------------------------
----------------------------------------------
----------------
------------------- --------------
---- --
----------------------
--------------------------------
-现在，您的 Redux store 中已经连接了一个名为 breakpoint的状态，该状态会包含您定义的断点值。在此示例中，我们有四个断点：mobile（宽度为320像素）、tablet（宽度为768像素）、desktop（宽度为992像素）和 largedesktop（宽度为1200像素）。
要在 Redux store 中使用这些断点，请参阅下一部分。
3. 使用网格
-- -------------------- ---- -------
------ - ------- - ---- -------------
------ - ---- --- - ---- -----------------
------ ------------
----- ------------ - -- ---------- -- -- -
---- -------------------------
-----
---- ------ ---------- -------
---- -- --- ---- ------- -----
------
---- ------ ---------- -------
---- -- --- --------
------
------
------
-
----- --------------- - ----- -- --
----------- -----------------------------------
--
------ ------- --------------------------------------在该例子中，您可以看到我们使用了 react-bootstrap 网格来创建响应式布局。此外，我们连接到了 redux store 的断点状态，并将其传递给“Col”元素。
在使用 redux-breakpoint 时，如果您需要进行不同的行为，以响应不同的断点，请查看下一部分。
4. 使用断点
-- -------------------- ---- -------
------ ----- ---- -------
------ --------- ---- ------------
------ - ---------- - ---- ------------------
------ ------------------------
----- --------------- - -- --------- -- -- -
------------
--- ---------- -- -- -
------ ------------ -
---- ---------
------ ---- ----------------------- ---------------------- --
---- ---------
------ ---- ----------------------- ---------------------- --
---- ----------
------ ---- ------------------------ ----------------------- --
---- ---------------
------ ---- ----------------------------- ---------------------------- --
--------
------ ----
-
--
-------------
-
------------------------- - -
---------- -----------------
------- -----------------
------- -----------------
-------- -----------------
------------- -----------------
--------------
-
------ ------- ---------------在该示例中，我们使用了一个名为“Breakpoint”的组件来获取当前窗口的断点，并根据当前断点显示不同的图像。您可以采取自己的行动方式，以响应不同的断点。
最佳实践
在这里，我们提供一些使用 redux-breakpoint 的最佳实践提示。它们将帮助您获得始终如一的结果：
- 在您的应用程序中定义整个断点对象。这可以确保您使用相同的窗口宽度定义，而不必在整个代码库中反复编写它们。
- 使用断点定义变量，而不是直接在代码中使用硬编码断点宽度。这允许您更轻松地进行代码维护和调试，因为您只需要更新定义中的断点宽度，而不必查找每个已编写的开关语句来更改它。
结论
redux-breakpoint 是一个有用的 npm 包，它允许您通过 Redux store 将响应式行为与应用程序状态关联在一起。使用该工具，您可以轻松定义断点，使用它们来更改应用程序行为，并确保您的应用程序在不同设备上保持一致。这个教程希望能够帮助您使用这个工具，并为您带来价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea381e8991b448dc023