uroot
@uroot

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

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

Сам глупый компонент выглядит так:
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?
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
@dimoff66
Кратко о себе: Я есть
Умный компонент должен читать свойство из стора, куда пишется имя кнопки и передавать булево значение в глупый компонент 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' : '')}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы