發現大部分人並不喜歡在元件樹的每一層手動傳遞迴調。儘管這種寫法更明確，但這給人感覺像錯綜複雜的管道工程一樣麻煩。

在大型的元件樹中，我們推薦的替代方案是通過 context 用 useReducer 往下傳一個 dispatch 函式：

const TodosDispatch = React.createContext(null);

function TodosApp() {
  // 提示：`dispatch` 不會在重新渲染之間變化
  const [todos, dispatch] = useReducer(todosReducer);

  return (
    <TodosDispatch.Provider value={dispatch}>
      <DeepTree todos={todos} />
    </TodosDispatch.Provider>
  );
}
 

TodosApp 內部元件樹裡的任何子節點都可以使用 dispatch 函式來向上傳遞 actions 到 TodosApp：

function DeepChild(props) {
  // 如果我們想要執行一個 action，我們可以從 context 中獲取 dispatch。
  const dispatch = useContext(TodosDispatch);

  function handleClick() {
    dispatch({ type: 'add', text: 'hello' });
  }

  return (
    <button onClick={handleClick}>Add todo</button>
  );
}
 

總而言之，從維護的角度來這樣看更加方便（不用不斷轉發回撥），同時也避免了回撥的問題。像這樣向下傳遞 dispatch 是處理深度更新的推薦模式。

注意，你依然可以選擇是要把應用的 state 作為 props 向下傳遞（更顯明確）還是作為作為 context（對很深的更新而言更加方便）。如果你也使用 context 來向下傳遞 state，請使用兩種不同的 context 型別 —— dispatch context 永遠不會變，因此元件通過讀取它就不需要重新渲染了，除非它們還需要應用的 state。