用 Redux (action/reducers) 构建 ReactJS 组件的好方法是什么？

Question

所以，我坐下来创建 ReactJS 组件，用数据和操作可视化页面（使用 Redux），但是有很多移动部件！使用 React 和 Redux 构建时，好的步骤顺序是什么？在这一点上从哪里开始非常令人困惑，而且我似乎无法构建在每一步都运行的​​代码。看来我必须一次完成整个墨西哥卷饼。

第一次尝试创建使用组件/容器/动作/状态构建 React + Redux 的配​​方：

1. 先构造组件，然后用虚拟数据显示它们的层次结构
   • 定义一个稍后将成为道具的虚拟数据
   • 定义稍后将成为操作的虚拟函数或处理程序
   • 带有虚拟页面和组件的显示页面

（这些步骤的其余部分将中断编译，直到全部完成......）

1. 为每个组件定义 propTypes 和 getInitialState

   • 这会破坏组件
   • 将道具映射到数据和函数（用于稍后的操作）

2. 为根组件创建包装容器

   • 并非所有组件都完成
   • 在添加所有片段之前，这仍然是一个损坏的编译状态

3. 下一步创建动作

   • 仍然没有定义确切的状态“结构”，这将出现在减速器中...
   • 动作排序对我的基本数据执行 CRUD，这些数据实际上是在 reducer 中返回的

4. 创建减速器

   • 采取一些 ADD 或 SET 操作来创建初始状态数据
   • 这是使用上面定义的虚拟数据
   • 为每个状态“数据”创建一个减速器

5. 根据需要更新 action 和 reducer，直到 state.myData 看起来不错

6. 用 reducer 组装 connect()...

   • 创建连接(mapStateToProps, mapDispatchToProps)(wrappedComponent)
   • define mapStateToProps - 为使用一些 state.someData 和 state.someOtherData 返回的数据定义 JSON
   • 定义 mapDispatchToProps - 添加操作作为道具功能

7. 现在，将 reducer 包含在顶层存储中

   • 让 store = createStore(myCombinedReducers)

8. 重新访问初始组件并检查

   • props 涵盖传入数据（存储状态）和函数（真正的操作）

9. 重温包装容器

   • 检查 mapStateToProps 是否返回正确的“数据”名称
   • 注意：状态数据可以用在组件上，也可以用在 mapStateToProps 上，所以一开始并不总是很明显
   • 可能需要添加额外的基于过滤等的变换
   • 检查 mapDispatchToProps 对函数处理程序的正确操作

10. 更多检查，查看 mapStateToProps 和 mapDispatchToProps

    • 使用 Find on Files 执行搜索 'state.someData' 并检查在所有正确位置使用是否正确
    • 使用 Find on Files 执行搜索“functionHandler”并检查在正确的位置使用

嗯，有更好的方法吗？

提前谢谢你！

Answer 1

那是彻底的崩溃！到目前为止，我在自己的 React/Redux 之旅中总结了以下几点：

您提到有很多活动部件。首先要做的事情之一是将更大的应用程序解构为更易于管理的部分。

在Thinking in React 中，数据流的识别（或他们所说的“识别 UI 状态的最小表示”）是他们过程中的第三步。

对于使用 Redux 的应用程序，我倾向于通过创建 reducer 来首先定义数据流来表示整个应用程序状态。

定义 reducer 的一种方法是 TDD 方法，就像 Redux 创建者名声的 Dan Abramov 在他的“Redux 入门系列”中的 Redux: Writing a Counter Reducer with Tests 中所做的那样。

首先让数据流正常工作为您提供了一个很好的工作平台。所有的数据流逻辑都已经设置好了，接下来要做的就是充实组件来渲染数据。