Как правильно навешивать класс активной кнопке в React/Redux?

Question

[uRoot]

Есть умный компонент и глупы. В глупом рендерятся кнопки:

spoiler

Сам глупый компонент выглядит так:

import React from 'react';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import style from './method.module.scss'
import {useDispatch} from "react-redux";
import {getMethod} from "../../redux/action";


export default function Method({title, description, name}) {
  const dispatch = useDispatch()

  return (
    <Card className={style.method}>
      <CardActions>
        <Button
          name={name}
          className={style.button}
          size="small"
          onClick={(event) => dispatch(getMethod(event.currentTarget.name))}
        >
          <CardContent>
            <Typography variant="h5" component="h2">
              {title}
            </Typography>
            <Typography  color="textSecondary">
              {description}
            </Typography>
          </CardContent>
        </Button>
      </CardActions>
    </Card>
  );
}

Экшен getMethod получает name кнопки и пишет его в стор:

export function getMethod(method) {
  return {
    type: REQUES_METHOD,
    payload: method
  }
}

Я не могу понять где должна быть логика навешивания класа active активной кнопке. Как правильно организовать логику не нарушая паттерны React/Redux?

Answer 1

[Дмитрий]

Умный компонент должен читать свойство из стора, куда пишется имя кнопки и передавать булево значение в глупый компонент Method, Который в зависимости от этого глупого значения добавляет к кнопке класс active или нет.

export default function Method({title, description, name, isActive}) {

...
       <Button
          name={name}
          className={style.button + (isActive ? ' active-class' : '')}

Либо как вариант передавать activeName в Method и там уже сравнивать

export default function Method({title, description, name, activeName}) {
  const isActive = name === ActiveName 
...
       <Button
          name={name}
          className={style.button + (isActive ? ' active-class' : '')}

Но вообще сохранение активной кнопки в стор не кажется очевидным, возможно достаточно хранить имя активной кнопки в стейте умного компонента, ибо стор нужен когда необходимо сохранить значение активной кнопки между вызовами компонента или когда нужно его передать в другие компоненты.

Comments

[uRoot]

Дмитрий я просто хочу попробовать Redux в контексте React, поэтому его использую.

Ну, у меня вышло, что я каждой своей кнопке передаю в props название активной кнопки и сравниваю его с name самой кнопки и если оно совпадает, то я навешиваю класс. На деле это выглядит так:

Глупый компонент:

export default function Method({title, description, name, isActive}) {
  const dispatch = useDispatch()

  return (
    <Card className={style.method + (name === isActive ? " active" : "" )}>
      <CardActions>
        <Button
          name={name}
          className={style.button}
          size="small"
          onClick={(event) => dispatch(getMethod(event.currentTarget.getAttribute("name")))}
        >
          <CardContent>
            <Typography variant="h5" component="h2">
              {title}
            </Typography>
            <Typography  color="textSecondary">
              {description}
            </Typography>
          </CardContent>
        </Button>
      </CardActions>
    </Card>
  );
}

Спасибо за помощь