如何在单独的父组件中分派操作

Question

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

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

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

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

感谢任何帮助。 TIA.

Answer 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
);

如何在单独的父组件中分派操作

How to dispatch action in a separate, parent component

reactjs

redux

react-router

react-redux

react-router-redux