如何在单独的父组件中调度操作答案

【问题标题】：How to dispatch action in a separate, parent component如何在单独的父组件中调度操作
【发布时间】：2018-08-02 18:33:05
【问题描述】：

我正在尝试开发一个使用 react、redux 和 react-router-redux 构建的应用程序。它的构建使得页眉和页脚——反应组件——对于路由中定义的实际页面是“外部的”。例如，<App/> 是这样的：

<Provider store={store}>
   <ConnectedRouter history={history}>           
      <div>
         <header/>
         {routes_for_pages}
         <footer/>
      </div>               
   </ConnectedRouter>
</Provider>

在其中一个路由上，它们是一个调度操作的组件，并且根据返回的结果，需要使用适当的内容更新页眉和页脚。

如何让该特定组件中的调度同时向页眉和页脚调度一个动作？我看到的问题是组件（页面组件、页眉组件和页脚组件）彼此不认识，它们是作为兄弟姐妹组成的。

任何帮助表示赞赏。 TIA。

【问题讨论】：

你不需要从多个地方分派动作，你可以在多个减速器中捕获相同的动作

标签： reactjs redux react-router react-redux react-router-redux

【解决方案1】：

没有必要从多个组件分派动作。相反，您应该有多个 reducer，每个 reducer 根据分派的操作执行不同的操作。

如果您使用的是redux-saga，则此代码会更加简洁。您在 saga 中捕获初始动作，并让 saga 进一步调度应该连续或一起发生的一组动作。

例如：

// saga handler
function* mySaga(action) {
  yield put('DO_SOMETHING');  // dispatches DO_SOMETHING
  yield put('UPDATE_HEADER'); // ...
  yield put('UPDATE_FOOTER'); // ...
}

function mySagaWatcher(
  takeLatest,
  'SOMETHING_TRIGGERED_THIS_ACTION',
  mySaga
);

【讨论】：