javascript - 最佳实践 : Handle read-only data with Redux

Question

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

我的应用程序使用 React Router。它有一个导航栏(在左侧)，显示来自带有 Material Design 菜单的 React Router 配置文件的路由。

我想知道处理此 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 状态树中。在这种情况下，我会有一个像这样的常量 reducer :

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',
  },
]);

没有 Action 处理程序的常量 reducer 是一个好习惯吗？如果不是，我应该怎么办？

提前致谢。

Answer 1

我不了解你的 reducer 是如何工作的。什么是 handleActions？

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

/* 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;
}