Задать вопрос

Стоит ли использовать хуки вроде useState когда уже управляешь состоянием с помощью Redux?

Прошу сильно не кидаться камнями, только изучаю React, и пока что не понятна одна идея.

Создаю пет проект-тудушку:
Picture
60b7bfd0cd6c9661994353.png


Сейчас тудушка раздает состояние по пропсам через корневой компонент Home -> props.
Все было хорошо, пока не пришла надобность передать состояние из корневого компонента Home в компонент NewToDo, который находится в другом Роуте.
Code

const Router = (props) => {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/new" component={NewToDo} />>
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
    </div>
  );
};


Создал отдельную ветку в гите, и начал копать redux, и в первом же моменте увидел что в принципе можно не использовать хук useState, когда redux отдает свои useDispatch() и useSelector(), которые управляют глобальным состоянием. Вопрос: есть ли смысл в хуке useState, если уже используешь стору редакса?

И второй вопрос:
Сейчас в корневом компоненте лежит функция:

const [formatData, setFormatData] = useState({});
useEffect(() => {
    const dateKeys = ["weekday", "day", "month", "year"];
    (function () {
      const ruDate = new Intl.DateTimeFormat("ru", { ------ получаю дату
        day: "2-digit",
        month: "long",
        year: "numeric",
        weekday: "long",
      })
        .format(new Date())
        .replace(/,/, "")                ----//убираю и меняю символы
        .replace(/в/, "В")
        .replace(/с/, "С")
        .replace(/\sг./, "")
        .split(" ");                      --------  создаю массив

      const result = Object.assign(                           ----- привожу массив к виду объект: {ключ: свойство}
        ...dateKeys.map((k, i) => ({ [k]: ruDate[i] }))
      );
      setFormatData(result);
    })();
  }, []);

которая отдает шаблонную строку с форматированной датой, и дальше я передаю её по пропсам в компонент. Вопрос:
Говнокод ли вот эта колбаса? И если да, как её уменьшить?
.replace(/,/, "")                ----//убираю и меняю символы
        .replace(/в/, "В")
        .replace(/с/, "С")
        .replace(/\sг./, "")

Второй вопрос:
Именно эту функцию(объект который я потом храню в useState) я должен передавать в другой компонент роута. Где эта функция должна хранится? В сторе и помещать её в стору как объект присваиванием?
  • Вопрос задан
  • 553 просмотра
Подписаться 3 Средний Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 4
@karminski
Senior React.JS Developer
Если в двух словах, редукс для глобального состояния всего приложения (например, хранить данные таблиц), а хуки для состояния отдельных компонентов (типа табов). Но это не панацея. Лично у меня есть приложение, использующие только хуки для хранения состояния.
Ответ написан
@n1ksON
мидл
Не используйте props для пробрасывания dispatch и store из redux. Для этого, как вы верно подметили, есть useSelector и useDispatch.
1. useState очень даже нужен несмотря на использование redux. К примеру, у вас на сайте отображается уведомление при клике на кнопку. Зачем статус отображения уведомления выносить в redux? Redux, как верно заметили, это как глобальный store. В этом нет надобности, для статуса отображения (true/false) достаточно использовать useState внутри компоненты.
2. Не совсем корректно сформулировали вопрос.
Если у вас функция используется только в конкретной компоненте - храните в ней.
Если функция используется в нескольких компонентах одного уровня - вынесите функцию на уровень выше, куда эти компоненты импортируются.
Если функция часто используется в разных местах - вынесите её в отдельный файл (utils) и импортируйте в нужные компоненты.
Вопрос: Говнокод ли вот эта колбаса?

Не понятно, что она решает. Возможно можно написать чуть красивее или вообще на регулярных выражениях. Главное, чтобы решало необходимую задачу
Ответ написан
Комментировать
@skeevy
Frontend WebDev
1. Redux/либой другой стейт менеджер для глобальных состояний и хранения большого объема данных
2. useState - для состояния компонента, например, переключение флага, по которому добавляется активный класс для элемента

я использую такой подход, когда есть в приложении Redux/MobX/Recoli/etc. + сам Дэн Абрамов говорил о таком подходе. (HolyJS 2020)
Ответ написан
Комментировать
@slide13
frontend/web-developer
Про редакс уже все сказали, часто есть необходимость использовать useState при наличии redux и это нормально.

Про replace. Т.к. в replace у строки вторым параметром можно передать функцию, то здесь явно можно этим и воспользоваться:
сделать объект, где ключом была бы подстрока из совпадения, а значением - то, на что ее нужно заменить и потом по совпадению подставлять нужное значение из объекта, примерно так:
let matches = {
  ",": "",
  "в": "В",
  "с": "С",
  " г.": ""
}

.replace(/с|в|\sг./g, (match) => matches[match])

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

Далее, естественно, не надо хранить функции в редаксе. Различные доп. функции лучше выносить в отдельную папку и разбивать по типам, например, для работы с датами, для форматирования чисел и т.д. и импортировать в нужные компоненты непосредственно оттуда.
Это полезно, т.к. никто не знает, когда и кому она пригодится снова, а тем более если это большой проект. Написав ее где-то у себя в компонентах ее могут не найти и создать копию где-то еще. Также ее придется тестировать, импортировать утилиты для тестов проще из одного места, чем искать по компонентам, а утилиты все равно придется тестить отдельно от ui.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽