在非单页应用程序中调用 React/Redux - 在特定路由上调用多个调度函数

Question

我正在慢慢地将一个大型Web应用程序从jQuery转换为React/Redux。该应用程序是用 Python 构建的，并具有触发硬刷新的正确路由。如何仅在特定路由上调度 Redux 操作？我只能让它用于一个操作，但在某些情况下我需要触发多个操作。例如，在内容列表页面上，我需要触发对 API 的调用以返回所有内容(工作正常(。单击以编辑一段内容时，我需要触发一个单独的 API，该 API 仅返回选定的内容片段以及一个元数据 API，该 API 使用选项填充各种选择输入。

如果我这样格式化它，只有第一个调用似乎有效：

import React from 'react';
import { Route } from 'react-router';
import configureStore from './store/configureStore';
import { loadAllContent, loadSpecificContent } from './actions/myContentActions';
import { loadMetadata } from './actions/metadataActions';
import App from './components/App';
import MyContentPage from './components/MyContent/MyContentPage';
import ManageContentPage from './components/MyContent/ManageContentPage';
export const store = configureStore();
export const routes = (
<Route path={'/'} component={App}>
// This page works fine as only one dispatch
<Route
path={'/my-content'}
component={MyContentPage}
onEnter={() => store.dispatch(loadAllContent())}
/>
// This page fires the first function fine but not the second
<Route
path={'/my-content/:id'}
component={ManageContentPage}
// dispatch multiple actions here
onEnter={() => store.dispatch(loadSpecificContent(), loadMetadata('ages'))}
/>
</Route>
);

Answer 1

根据MDN 文档：

var func = x => x * x; 简洁的语法，隐含 "返回">

var func = (x， y( => { return x + y; }; 带块体，显式 需要"返回">

使用带有箭头功能的{}，它将创建一个主体并将所有调度操作放入其中。

喜欢这个：

onEnter={() => {
store.dispatch(loadSpecificContent());
store.dispatch(loadMetadata('ages'));
}}