简介
@types/redux-injectable-store 是一个 TypeScript 类型定义包，提供了基于注入的 Redux Store的类型定义和类型声明。它使得在写 Redux 应用时能够更加健壮和高效，并且可以遵循单一原则（Single Responsibility Principle, SRP），以及其他的设计模式和最佳实践。
功能
该包中提供的类型定义包括：
InjectableStore: 一个接口，定义了基于注入的 Redux Store 的核心结构。InjectAsyncReducerAction: 一个类型，为基于注入的 Redux 应用中添加异步 reducer 的标准 action。injectAsyncReducerReducer: 一个 reducer，用于处理InjectAsyncReducerAction，并将异步 reducer 注入到原始的 Redux Store 中。
安装
首先，需要已经安装了 Node.js 和 npm。
然后，在命令行执行：
npm install @types/redux-injectable-store --save-dev
使用
在使用 @types/redux-injectable-store 时，需要按照以下步骤进行：
创建注入器
首先，根据需要，创建注入器（Injector）。注入器是一个可以将异步 reducer 注入到原始的 Redux Store 中的工具。它通常应该在应用程序的“入口”处创建。例如：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ---------------- ------------------------- - ---- -------------------------------- -- ---- -- ------ --- -------- ----- -------- - ------- ---------------- -- ------ ---- -- -------- ---- -- - ----- ------ - ------------- ---------------------------------------- ---- -- ------------------------------------------------ ------ ------- --
上述代码中，我们首先导入了需要的库。然后，我们定义了一个函数 injector，它接受一个 InjectableStore 对象，并返回一个函数。该函数将被用于创建一个 Middleware，将异步 reducer 注入到原始的 Redux Store 中。
配置应用程序
要将注入器应用到应用程序中，需要在 createStore 函数中传递middleware参数，以及可选的 preloadedState参数。例如：
import { createStore, applyMiddleware } from 'redux';
import { reducer } from './path/to/rootReducer';
import { injector } from './path/to/injector';
// Step 2: Configure the application
const store = createStore(reducer, {}, applyMiddleware(injector));上述代码中，我们定义了 reducer 和 injector，并将它们应用到 createStore 函数中。我们使用了 preloadedState 参数，将一个空对象作为初始状态传递给了应用程序。
注入异步 reducer
最后，我们可以使用 AsyncReducerInjector 对象注入异步 reducer。例如：
-- -------------------- ---- ------- ------ - -------------------- - ---- -------------------------------- -- ---- -- ------ ------------ -------- ----- -------------- - --- ---------------------------- -- ------ ---- ----- -------- ----- ------------- - - ----------------- ----------------- -- -- ------ --- ----- -------- ------------------------------------- -- --- ----- ------- ------- ------ --- -- ------- -- --- ----- -----
上述代码中，我们首先导入了 AsyncReducerInjector。然后，我们创建了一个 helper 对象 injectorHelper，并传递了刚刚创建的 store。接着，我们定义了一个对象 asyncReducers，它包含了需要注入到我们的应用程序中的异步 reducer。最后，我们使用 injectorHelper.inject 方法，将 asyncReducers 注入到原始的 Redux Store 中。
示例代码
下面是一个基于注入的 Redux Store 的示例代码，展示了如何使用 @types/redux-injectable-store：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ - ---------------- ------------------------- -------------------- - ---- --------------------------------
-- ------ ---- ----- --------
----- ---------------- - ------ - - ----- ---- -- ------- -- -
------ ------------- -
---- -----------
----- - ---- - - ---------------
------ -
-----
--
--------
------ ------
-
--
-- ---- -- ------ --- --------
----- -------- - ------- ---------------- -- ------ ---- -- -------- ---- -- -
----- ------ - -------------
---------------------------------------- ---- -- ------------------------------------------------
------ -------
--
-- ---- -- --------- --- -----------
----- ------- - ------ - - ------ ----- -- ------- -- -
------ ------------- -
---- ------------
----- - ----- - - ---------------
------ -
---------
------
--
--------
------ ------
-
--
----- ----- - -------------------- --- ---------------------------
-- ---- -- ------ ------------ --------
----- -------------- - --- ----------------------------
----- ------------- - -
----------------- -----------------
--
-------------------------------------
-- -------- -- ------ -- ------ --- ----- -------
----- ------------- - -
----- -----------
-------- -
----- ------
--
--
------------------------------结论
@types/redux-injectable-store 提供了一种高效的方式，用于处理基于异步的 Redux 应用程序。使用该包能够让开发人员更加健壮和高效地编写 Redux 应用程序，并遵循最佳实践和设计模式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc1acb5cbfe1ea0611ea4