最佳实践：使用 Redux 处理只读数据

Question

我正在使用 React 和 Redux 构建应用程序，我对设计有疑问。

我的应用程序使用 React Router。它有一个导航栏（在左侧），显示来自 React Router 配置文件的路由和 Material 设计菜单。

我想知道处理此 LeftNav 组件的静态数据的最佳做法是什么。

此数据具有以下形状：

const menuItems = [
  {
    icon: 'home',
    label: 'Home',
    url: '/home',
    withDivider: true,
    access: 'all',
  },
  {
    icon: 'settings',
    label: 'Settings',
    url: '/settings',
    access: 'admin',
  },
  {
    icon: 'power_settings_new',
    label: 'Log Out',
    url: '/logout',
    access: 'user',
  },
];

为了尊重 smart and dumb component proposal，我的 LeftNav 组件是无状态的。我还有一个智能组件（现在它只是我的 AppContainer），它呈现 LeftNav 组件并通过 props 向其提供 menuItems 数组。

我想知道我是否必须将这个只读数据包含到我的 redux 状态树中。在这种情况下，我会有一个像这样的常量减速器：

export default handleActions({}, [
  {
    icon: 'home',
    label: 'Home',
    url: '/home',
    withDivider: true,
    access: 'all',
  },
  {
    icon: 'settings',
    label: 'Settings',
    url: '/settings',
    access: 'admin',
  },
  {
    icon: 'power_settings_new',
    label: 'Log Out',
    url: '/logout',
    access: 'user',
  },
]);

没有动作处理程序的常量减速器是一个好习惯吗？如果不是，我该怎么办？

提前致谢。

Answer 1

我不明白你的减速器是如何工作的。什么是 handleActions？

我认为常量 reducer 似乎是一个合理的解决方案，但我会使用默认的第一个参数来实现它。假设您正在使用 combineReducers 将所有减速器的范围限定在它们控制的状态部分，我会做类似的事情：

/* reducers.js */

const menuItemsInitialState = [
  {
    icon: 'home',
    label: 'Home',
    url: '/home',
    withDivider: true,
    access: 'all',
  },
  {
    icon: 'settings',
    label: 'Settings',
    url: '/settings',
    access: 'admin',
  },
  {
    icon: 'power_settings_new',
    label: 'Log Out',
    url: '/logout',
    access: 'user',
  },
];

export function menuItems(state = menuItemsInitialState, _) {
  return state;
}

Answer 2

就我个人而言，我更喜欢我的减速器专注于处理应用程序/系统范围的状态。您的示例中的配置作为使用它的组件中的常量会感觉更自在 (LeftNav?)

Answer 3

@Cnode 我同意@acjay 它应该处于减速器状态，即使没有动作创建者。

我会更进一步，建议您应该在应用加载后获取数据，而不是将数据包含在您构建的文件中。通常数据不属于内置文件。

这是因为，在现实世界中，这个特定的集合（以及其他集合 - 可能更大的集合）将在 API 上静态可用，因为您可能希望 CMS 可以配置这些值。

添加一个静态减速器来承载这个状态
在应用程序初始化后获取数据，然后将其推送到状态 - 这意味着您将至少有一个动作创建者。

最佳实践：使用 Redux 处理只读数据

Best Practice: Handle read-only data with Redux

javascript

flux

reactjs

react-router

redux