Best Practice: Handle read-only data with Redux

Question

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

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.

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

This data has the following shape:

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

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.

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?

Thanks in advance.

Answer 1

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?)