管理嵌套的Redux容器而不传递道具？

Question

给定像这样的组件层次结构：

<TodoList>
  <Todo>
    <TodoHeader/>
    <TodoBody>
      <TodoDetails>
        <TodoStatus />
      <TodoDetails>
      <TodoDescription />
    <TodoBody>
  <Todo></TodoList>

......还有这样的商店：

{
  todos: [
    { id: 1, status: "INCOMPLETE", header: "title one", description: "do a something" },
    { id: 2, status: "INCOMPLETE", header: "title two", description: "something else" },
    { id: 3, status: "COMPLETE", header: "title three", description: "one more thing" },
  ]}

有没有一种好的方法让嵌套TodoStatus组件连接到商店而不必将id组件层次结构作为道具传递下去？例如，Todo可以设置currentTodoId = 1为可用于减少儿童的上下文，但是有替代方案吗？也许是父组件将存储减少到一个子组件然后能够看到的单个待办事项的方式......？

在这一点上，你可能想问“为什么”？好吧，考虑到TodoList（在todos数组上运行）和嵌套TodoStatus（只想在一个todo上运行）之间可能存在几个级别的严格表示组件。必须通过todoId像这样的层次结构向下传递是非常痛苦的：

<TodoList>
  <Todo todoId={1}>
    <SomeAnimation todoId={1}>
      <SomeLayout todoId={1}>
        <SomeOtherAnimation todoId={1}>
          <SomeDebugContainer todoId={1}>
            <TodoHeader todoId={1}>
            <TodoBody todoId={1}>
              <TodoDetails todoId={1}>
                <TodoStatus todoId={1}> // yay!

在这一点上，我想象这是React上下文特别适合的，所以可能没有Redux特定的模式，但我想错了！

Answer 1

为什么他们都需要接受id作为一个论点？通常，层次结构中较高的某个组件（例如Todo）会接受id或者todo，但是下面的组件在它们接受的内容中会更具体，例如function&nbsp;Todo({&nbsp;todo&nbsp;})&nbsp;{ &nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SomeAnimation> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SomeLayout> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SomeOtherAnimation> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SomeDebugContainer> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<TodoHeader&nbsp;title={todo.title}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<TodoBody&nbsp;{...todo}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SomeDebugContainer> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SomeOtherAnimation> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SomeLayout> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SomeAnimation> &nbsp;&nbsp;)}在这个例子中，TodoHeader只是title直接接收道具。如果它需要更多的道具，你可以像我一样分散todo属性。从你的例子中可以明显看出为什么组件需要知道todo ID - 大概传递它的一些视觉属性就足够了。{...todo}<TodoBody>SomeAnimation类似地，内部组件TodoBody可能会将一些道具向下传递，但同样，这不一定是ID：function&nbsp;TodoBody({&nbsp;title,&nbsp;text,&nbsp;status&nbsp;})&nbsp;{ &nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<TodoDetails&nbsp;text={text}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<TodoStatus&nbsp;status={status}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;)}一般来说，返回的深树render()通常意味着您的组件结构不是最理想的。您不必this.props.children在每个组件中使用- 随意保持组件可以控制它们自己的渲染，并且只传递它们所需的内容。有时传递一个id很方便，其他时候直接传递数据会使依赖更明确。

Answer 2

具体来说，在这种情况下（父级管理XYZ对象列表），您希望有一些组件为单个XYZ逻辑执行表示逻辑。因此，父节点能够减少各个组件可访问的状态树，以便它们可以相对于该单个XYZ状态编写reducer，这将是有用的。似乎这种类型的行为可以通过一些Redux插件来访问redux-cursor，但我想知道是否存在我缺少的现有模式