什么是 redux-entry？
redux-entry 是一款简单易用的 Redux 中间件，它可以将你的 Redux 应用程序分解成更小的模块，以便更好地组织和管理你的代码。
如何安装 redux-entry？
你可以使用 npm 进行安装，只需要运行以下命令：
npm install redux-entry
如何使用 redux-entry？
接下来，我们将逐步介绍如何使用 redux-entry。
首先，在你的 Redux 应用程序中导入 redux-entry：
import { createStore, applyMiddleware } from 'redux';
import { createReduxEntryMiddleware } from 'redux-entry';
import rootReducer from './reducers';然后，创建 redux-entry 中间件：
const entryMiddleware = createReduxEntryMiddleware();
接下来，将中间件应用于你的 store：
const store = createStore( rootReducer, applyMiddleware(entryMiddleware), );
现在，你已经成功地将 redux-entry 中间件集成到了你的 Redux 应用程序中。
redux-entry 的核心概念
在使用 redux-entry 时，有两个核心概念，即「模块」和「入口」。
模块
模块是指具有独立功能的 Redux 模块，每个模块都有自己的 action creators、reducer 和 selectors，可以独立运行和测试。你可以通过定义多个模块来将应用程序拆分成更小的部分。
入口
入口是指将多个模块组合成一个 Redux 应用程序的入口文件。入口文件负责创建 store 并将各个模块注册到 store 中。
如何创建一个模块
下面，我们将以一个简单的计数器应用程序为例，介绍如何创建一个模块。
首先，我们创建一个名为 counter 的文件夹，在其中创建以下文件：
counter/ ├── actions.js ├── index.js └── reducer.js
在 actions.js 中，我们定义我们的 action creators：
export const increment = () => ({ type: 'INCREMENT' })
export const decrement = () => ({ type: 'DECREMENT' })在 reducer.js 中，我们定义我们的 reducer：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
------ ------- -------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-最后，在 index.js 中，我们将 actions 和 reducer 导出：
export { increment, decrement } from './actions';
export { default } from './reducer';现在，我们已经成功地创建了一个名为 counter 的模块。
如何创建一个入口
接下来，我们将介绍如何创建一个入口文件。
我们创建一个名为 store.js 的文件，在其中创建以下内容：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ - --------------------------- ----------------------- - ---- --------------
------ ------- ---- ------------
----- --------------- - -----------------------------
----- ----------- - -----------------
----------------------------
--------
---
---
------ ----- ----- - ------------
------------
---------------------------------
--在以上代码中，我们将 counter 模块作为参数传递给 createReduxEntryReducer 函数，其会生成一个 reducer，并将它们添加到 rootReducer 中。我们使用 combineReducers 函数将所有的 reducer 合并为一个。
通过以上代码，我们已经成功地创建了一个 Redux store。
示例代码
下面，我们将通过一个完整的示例代码演示如何使用 redux-entry。
我们创建一个名为 app 的文件夹，在其中创建以下内容：
-- -------------------- ---- ------- ---- --- ---------- --- ------- --- --- ---------- --- --- -------- --- --- ---------- --- -------- --- -------------- --- --------
在最外层的 actions.js 中，我们定义状态的根 action creators：
export const setUserName = (name) => ({ type: 'SET_USER_NAME', name });在 counter 模块中，我们创建以下文件：
-- -------------------- ---- -------
-- ------------------
------ ----- --------- - -- -- -- ----- ----------- --
------ ----- --------- - -- -- -- ----- ----------- --
-- ------------------
----- ------------ - -
------ --
--
------ ------- -------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
-- ----------------
------ - ---------- --------- - ---- ------------
------ - ------- - ---- ------------在 rootReducer.js 中，我们将所有的 reducer 合并为一个 rootReducer：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - ----------------------- - ---- --------------
------ ------- ---- ------------
----- ----------- - -----------------
----------------------------
--------
--
---
------ ------- ------------在 store.js 中，我们创建 store 并将 rootReducer 应用于 store：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------------- - ---- -------------- ------ ----------- ---- ---------------- ----- --------------- - ----------------------------- ------ ----- ----- - ------------ ------------ --------------------------------- --
最后，在 index.js 中，我们将 store 导入并使用它来渲染组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- ------------
------ ------- ---- ------------
------ - ----- - ---- ----------
------------------------------------
----------------
--------- --------------
-------- --
------------
--------------------------------
--在上面的代码中，我们通过 Provider 来将 store 传递给应用程序，然后 dispatch 一个根 action 来初始化状态，最后渲染 Counter 组件。
结论
redux-entry 是一种非常好用的 Redux 中间件，它提供了一种更好的方式来组织和管理你的 Redux 应用程序。可以通过多个模块拆分应用程序，然后通过一个入口文件将它们组合起来，以此来简化管理和维护应用程序的复杂度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668381e8991b448e2ac6