javascript - 小道具を渡さずにネストされた 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ますが、それに代わるものはありますか? おそらく、親コンポーネントがストアを子コンポーネントが見ることができる単一の todo に減らす方法は...?

この時点で、おそらく「なぜ」と尋ねたいと思いますか？TodoListまあ、(todoの配列を操作する) と入れ子になった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 固有のパターンは存在しないでしょうが、間違っていると思います!