在日常的前端开发工作中，我们不可避免地需要使用 Redux 来管理应用的状态。Redux 的一个关键概念是容器组件（Container Component）和展示组件（Presentational Component）的分离。容器组件负责将数据和行为传递给展示组件，而展示组件则负责渲染 UI。但是，编写容器组件时，我们往往需要编写许多的样板代码，如 mapStateToProps、mapDispatchToProps 等。为了解决这个问题，有一个 npm 包叫做 redux-container-builder，它可以帮助我们自动生成容器组件的样板代码，提高开发效率。
1. 安装
通过以下命令可以安装 redux-container-builder：
npm install redux-container-builder
2. 使用方法
redux-container-builder 提供了两个函数，一个是 createContainer()，一个是 createContainers()。
2.1 createContainer()
createContainer() 可以用来生成单个容器组件的代码。它接收两个参数：展示组件和容器组件的映射函数。
下面是一个例子，假设我们有一个展示组件 Counter，用于显示计数器的值。我们想要编写一个容器组件来管理计数器的状态：
-- -------------------- ---- ------- ------ - --------------- - ---- -------------------------- ------ ------- ---- ------------ ----- --------------- - ------- -- -- ------ ----------- --- ----- ------------------ - ---------- -- -- ---------- -- -- ---------- ----- ----------- --- ---------- -- -- ---------- ----- ----------- -- --- ----- ---------------- - ------------------------ - ---------------- ------------------ ---
在代码示例中，我们使用了 createContainer() 函数，将 Counter 组件和 mapStateToProps、mapDispatchToProps 映射函数传递进去，生成了一个 CounterContainer 组件。CounterContainer 组件拥有与 store 的交互能力。
2.2 createContainers()
createContainers() 可以用来一次性生成多个容器组件的代码。它接收一个对象作为参数，对象的 key 值是展示组件，对象的 value 值是容器组件的映射函数。
下面是一个例子，假设我们有两个展示组件：CounterA 和 CounterB，我们想要编写两个容器组件来分别管理它们的状态：
-- -------------------- ---- ------- ------ - ---------------- - ---- -------------------------- ------ -------- ---- ------------- ------ -------- ---- ------------- ----- ---------------- - ------- -- -- ------ ------------ --- ----- ------------------- - ---------- -- -- ---------- -- -- ---------- ----- ------------- --- ---------- -- -- ---------- ----- ------------- -- --- ----- ---------------- - ------- -- -- ------ ------------ --- ----- ------------------- - ---------- -- -- ---------- -- -- ---------- ----- ------------- --- ---------- -- -- ---------- ----- ------------- -- --- ----- - ------------------ ----------------- - - ------------------ --------- - ---------------- ----------------- ------------------- ------------------- -- --------- - ---------------- ----------------- ------------------- ------------------- - ---
在代码示例中，我们使用了 createContainers() 函数，将 CounterA 和 CounterB 组件以及各自的 mapStateToProps、mapDispatchToProps 映射函数传递进去，生成了两个容器组件 CounterAContainer 和 CounterBContainer。
3. 结语
通过使用 redux-container-builder，我们可以自动生成容器组件的样板代码，让我们可以更加专注于实现业务逻辑，而不需要花费时间编写样板代码。使用 redux-container-builder 可以提高开发效率，避免重复劳动。但是，需要注意的是，使用 redux-container-builder 可能会引入一些额外的抽象和复杂性，开发者需要根据实际情况选择是否使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600f81e8991b448ddf15