最佳实践:使用Redux处理只读数据 [英] Best Practice: Handle read-only data with Redux

问题描述

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

I am building an application with React and Redux and I have a question about design.

我的应用程序使用React Router.它具有一个导航栏(左侧)，该导航栏显示带有材料设计菜单的React Router配置文件中的路线.

My application uses React Router. It has a Navigation Bar (on the left) that displays the routes from React Router configuration file with a Material Design Menu.

我想知道处理此 LeftNav 组件的静态数据的最佳实践是什么.

I would know what is the best practice to handle the static data of this LeftNav component.

此数据具有以下形状:

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

为了遵守智能和哑巴组件提案，我 LeftNav 组件是愚蠢且无状态的.我还有一个智能组件(现在只是我的 AppContainer )，该组件呈现 LeftNav 组件并通过props向其提供menuItems数组.

To respect the smart and dumb component proposal, my LeftNav component is dumb and stateless. I also have a smart component (right now it's just my AppContainer) that renders the LeftNav component and provides the menuItems array to it via props.

我想知道是否必须将此只读数据包括到我的redux状态树中.在这种情况下，我将有一个这样的恒定减速器:

I wonder if I must include this read-only data into my redux state tree. In this case, I would have a constant reducer like this:

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

拥有一个没有动作处理程序的恒定减速器是一种好习惯吗?如果没有，我该怎么办?

Is it a good practice to have a constant reducer with no action handler? If not, what should I do?

谢谢.

推荐答案

我个人更希望我的reducer专注于处理应用程序/系统范围的状态.您的示例中的配置作为使用它的组件内部的常量( LeftNav ?)

Personally I prefer my reducers to focus on dealing with application / system-wide state. The configuration in your example would feel more at home living as a constant inside the component which makes use of it (LeftNav?)

这篇关于最佳实践:使用Redux处理只读数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！