什么是 redux-starter-kit
redux-starter-kit 是一个官方支持的用于简化 Redux 开发的工具包。它集成了常用的工具和规范，如 immer、Redux DevTools Extension 和 代码拆分。
redux-starter-kit 可以大量减少 Redux 的样板代码，极大地提高开发效率和代码质量。同时，它也支持更好的 TypeScript 集成，可以让使用 TypeScript 的开发者更好地享受 Redux 的便利。
安装
你可以使用 npm 或者 yarn 安装 redux-starter-kit 包。
--- ------- ----------------- - -- ---- --- -----------------
使用
redux-starter-kit 提供了一个 configureStore 函数来替代 Redux 标准库中的 createStore 函数。这个函数需要一个对象作为参数，包含以下内容：
reducer：Redux 的根 reducer，可以是一个由多个 reducer 组成的对象。middleware：一个或多个 Redux middleware，可以是一个数组或是一个函数。devTools：一个对象，用于配置 Redux DevTools 扩展的使用。preloadedState：一个初始的 state 对象，可以不提供。如果提供了这个选项，就会在 createStore 的初始化时使用这个对象作为默认值。
以下是一个简单的示例：
------ - --------------- ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- - ------ - --
--------- -
---------- ------- -- -
-------------
--
---------- ------- -- -
-------------
--
--
--
----- ----- - ----------------
-------- ---------------------
--
------------------------------------------------
------------------------------------------------
------------------------------------------------
----------------------------- -- - ------ - -在这个示例中，我们使用了 createSlice 函数来创建了一个名为 counter 的 reducer 和它的 actions，分别是 increment 和 decrement。然后，我们使用 configureStore 函数来创建了一个 store，并将 counter reducer 作为 参数传递给了这个函数。
immer.js 支持
redux-starter-kit 默认使用 immer.js 作为 state 更新工具。使用 immer.js 只需要在 reducer 中直接改变 state，而不用写冗长的 switch-case 语句来对每个 action 进行处理。
以下是一个示例：
------ - --------------- ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- - ------ - --
--------- -
---------- ------- -- -
-------------
--
---------- ------- -- -
-------------
--
--
--
----- ----- - ----------------
-------- ---------------------
--
------------------------------------------------
------------------------------------------------
------------------------------------------------
----------------------------- -- - ------ - -在这个示例中，我们仍然使用了 createSlice 函数来创建了一个名为 counter 的 reducer 和它的 actions，分别是 increment 和 decrement。但是，我们在 reducer 中直接改变了 state，而不用写冗长的 switch-case 语句，这是因为 redux-starter-kit 默认使用了 immer.js。
使用 middleware
redux-starter-kit 支持在 configureStore 函数中指定一些 middleware，来对 action 进行处理。以下是一个示例：
------ - --------------- ------------ -------------------- - ---- -------------------
----- ---------------- - ------- -- ------ -- -------- -- -
------------------------ ------------
----- ------ - ------------
--------------------- -----------------
------ ------
-
----- ------------ - -------------
----- ----------
------------- - ------ - --
--------- -
---------- ------- -- -
-------------
--
---------- ------- -- -
-------------
--
--
--
----- ----- - ----------------
-------- ---------------------
----------- --------------------------- ------------------
--
------------------------------------------------
------------------------------------------------
------------------------------------------------
----------------------------- -- - ------ - -在这个示例中，我们定义了一个 loggerMiddleware，它用于在 action 被 dispatch 后输出日志信息。然后，我们将这个 middleware 添加到了 configureStore 的选项中。
Redux DevTools 扩展
redux-starter-kit 默认支持 Redux DevTools 扩展，并提供了一个默认的 devTools 选项来集成 Redux DevTools 扩展。你可以通过设置这个选项来自定义 Redux DevTools 的配置信息。以下是一个示例：
------ - --------------- ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- - ------ - --
--------- -
---------- ------- -- -
-------------
--
---------- ------- -- -
-------------
--
--
--
----- ----- - ----------------
-------- ---------------------
--------- -
----- --- -----
---------------- --------------
--
--
------------------------------------------------
------------------------------------------------
------------------------------------------------
----------------------------- -- - ------ - -在这个示例中，我们使用了 devTools 选项来更改了 Redux DevTools 的配置信息。我们修改了扩展的名称为 “My App”，并将 action 黑名单中的 DECREMENT action 从跟踪中移除。
结语
redux-starter-kit 是一个非常好用的 Redux 工具包，可以帮助你快速地写出高质量的 Redux 代码。使用它可以极大地提高 Redux 的开发效率和代码质量。我们在开发中建议使用 redux-starter-kit，让我们的代码更加简洁易懂，提高项目的可维护性和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/redux-starter-kit