Redux 是 React 中非常流行的状态管理工具，但是它的使用需要复杂的代码和配置。为了方便 Redux 的使用，出现了许多封装工具。其中一个被广泛使用的工具是 redux-concise。
redux-concise 提供了一个简化 Redux 使用的 API，并在内部处理了各种配置细节和繁琐的代码。使用它能够帮助我们更快、更方便地创建 Redux 应用。
安装
使用 npm 安装：
npm install redux-concise
基础用法
首先，我们需要定义 Redux 的状态和操作。这是我们将要存储的所有数据以及更改数据的方法。
-- -------------------- ---- ------- -- --------------- ------ ----- ------------ - - ------ -- -- ------ ----- --------- - ------- -- -- --------- ------ ----------- - -- --- ------ ----- --------- - ------- -- -- --------- ------ ----------- - -- ---
接下来，我们需要创建一个 Redux 存储对象，并在其中注册状态和操作。
-- -------------------- ---- ------- -- ------------ ------ - ----------- - ---- ---------------- ------ - ------------- ---------- --------- - ---- ------------- ------ ----- ----- - ------------- ------------- ---------- ---------- ---
最后，我们需要将存储对象注入到我们的 React 应用中。
-- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--现在我们就设置好了 Redux 应用。我们可以在组件中通过 useSelector 和 useDispatch 钩子访问状态和操作。
-- -------------------- ---- -------
-- -------------------------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ ------- -------- --------- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
----- --------------- - -- -- -
---------- ----- ----------- --
-
----- --------------- - -- -- -
---------- ----- ----------- --
-
------ -
-----
------- ------------------------------------
--------------------
------- ------------------------------------
------
--
-这就是 redux-concise 基础使用的介绍。接下来我们将会深入了解更多高级用法。
高级用法
异步操作
Redux 是同步的，但在实际应用中，我们经常需要与服务器交互、读取文件等等异步操作。redux-concise 允许我们通过中间件来处理这些异步操作。
我们将使用 redux-thunk 作为中间件。redux-thunk 允许我们在 Redux 的操作中返回函数而不仅仅是对象，这个函数可以进行异步操作并调度其他操作。
首先我们需要安装 redux-thunk：
npm install redux-thunk
接着，我们可以在 store.js 中使用 redux-thunk。
-- -------------------- ---- ------- -- ------------ ------ - ------------ --------------- - ---- ---------------- ------ - --------------- - ---- ---------------- ------ - ------------- ---------- --------- - ---- ------------- ------ ----- ---- -------------- ----- ----------- - -------- ------ ----- ----- - ------------- ------------- ---------- ---------- -------------------------------- ---
现在我们可以在操作中返回一个函数，函数将会自动接收 dispatch 和 getState 方法。
-- -------------------- ---- -------
-- ---------------
------ - ------------- - ---- --------
------ ----- ------- - ------- ----- -- --
---------
-----
---
------ ----- ------------ - -- -- -
------ ----- ---------- --------- -- -
----- - ---- - - -----------
-- ------- -
----- -------- - ----- ----------------
---------- ----- ---------- -------- ------------- ---
-
--
--这种方式非常有用，因为它允许我们封装数据获取逻辑，并在需要时自动获取数据。
强类型
Redux 应用的一个主要问题是数据类型不一致。这个问题通常通过文档和单元测试解决，但是使用 TypeScript 或 Flow 可以更好地解决它。
使用 redux-concise，您可以为每个操作和状态指定类型，以使它们变得强类型。指定类型将为您提供代码自动完成和类型检查，这对于大型应用程序非常有用。
-- -------------------- ---- -------
-- ---------------
---
- -------- -------- --------
- --------- -------- -----
--
---
- -------- -------- ------
- --------- -------- ----
--
---
- ------ ---------- -----
- ------- ----------
--
------ ----- --------- - ------- -- --
---------
------ ----------- - --
---
---
- ------ ---------- -----
- ------- ----------
--
------ ----- --------- - ------- -- --
---------
------ ----------- - --
---
---
- ------ ---------- -----
- ------ ------ ----
- ------- ----------
--
------ ----- ------- - ------- ----- -- --
---------
-----
---
---
- ------- ----------
--
------ ----- ------------ - -- -- -
------ ----- ---------- --------- -- -
----- - ---- - - -----------
-- ------- -
----- -------- - ----- ----------------
---------- ----- ---------- -------- ------------- ---
-
--
--这就是 redux-concise 的高级用法。它提供了许多方便的方式来简化 Redux 应用的创建，并使其更可靠和可读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e1d9381d61a3540929