Example of declarative implementation of redux reducer by JSX

userReducer.jsx

import * as React from 'react';
import PropTypes from 'prop-types';
// unexisted library, just for example
import { render } from 'react-store';

import { requestUserData, successUserData, errorUserData } from 'actions'

const typeRolesList = PropTypes.arrayOf(PropTypes.shape({
  name: PropTypes.string.isRequired,
  privelege: PropTypes.string.isRequired,
}));

class Roles extend React.Component {
  static propTypes = {
    list: typeRolesList,
  }

  static defaultProps = {
    list: [],
  }

  render() {
    return this.props.list.map(
      role => <role.name>{role.privelege}</role.name>
    )
  }
}

class User extend React.Component {
  static propTypes = {
    type: PropTypes.string.isRequired,
    payload: PropTypes.shape({
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
      avatar: PropTypes.string.isRequired,
      roles: typeRolesList,
    }),
  }

  static defaultProps = {
    payload: {}
  }

  shouldComponentUpdate({ type }) {
    return type === requestUserData.type ||
      type === successUserData.type ||
      type === errorUserData.type
  }

  render() {
    const { type, payload } = this.props;

    return (
      <>
        <loading>{type === requestUserData.type}</loading>
        <id>{payload.id}</id>
        <name>{payload.name}</name>
        <avatar>{payload.avatar}</avatar>
        <Roles list={payload.roles}/>
      </>
    )
  }
}

export default render(User)