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

Question

[xZand]

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

Создаю пет проект-тудушку:

Picture

Сейчас тудушка раздает состояние по пропсам через корневой компонент 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) я должен передавать в другой компонент роута. Где эта функция должна хранится? В сторе и помещать её в стору как объект присваиванием?

Answer 1

[Антон Иванов]

Если в двух словах, редукс для глобального состояния всего приложения (например, хранить данные таблиц), а хуки для состояния отдельных компонентов (типа табов). Но это не панацея. Лично у меня есть приложение, использующие только хуки для хранения состояния.

Comments

[Дмитрий Свиридов]

А не подскажете, пожалуйста, можно ли Redux заменить с помощью useContext-хука? Пока руки не дошли его потыкать

[Антон Иванов]

Дмитрий Свиридов, да вполне, по сути редукс можно заменить на связку useReducer + use Context.

[Антон Иванов]

Дмитрий Свиридов, можете посмотреть мой проект https://github.com/anton-p-ivanov/admin-react-ts-v5

[Дмитрий Свиридов]

Антон, огромное спасибо!

[Антон Иванов]

Дмитрий Свиридов, только не берите проект как догму - так много чего сделано на скорую руку

Answer 2

[n1ksON]

Не используйте props для пробрасывания dispatch и store из redux. Для этого, как вы верно подметили, есть useSelector и useDispatch.
1. useState очень даже нужен несмотря на использование redux. К примеру, у вас на сайте отображается уведомление при клике на кнопку. Зачем статус отображения уведомления выносить в redux? Redux, как верно заметили, это как глобальный store. В этом нет надобности, для статуса отображения (true/false) достаточно использовать useState внутри компоненты.
2. Не совсем корректно сформулировали вопрос.
Если у вас функция используется только в конкретной компоненте - храните в ней.
Если функция используется в нескольких компонентах одного уровня - вынесите функцию на уровень выше, куда эти компоненты импортируются.
Если функция часто используется в разных местах - вынесите её в отдельный файл (utils) и импортируйте в нужные компоненты.

Вопрос: Говнокод ли вот эта колбаса?

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

Answer 3

[Mikhail Derkach]

1. Redux/либой другой стейт менеджер для глобальных состояний и хранения большого объема данных
2. useState - для состояния компонента, например, переключение флага, по которому добавляется активный класс для элемента

я использую такой подход, когда есть в приложении Redux/MobX/Recoli/etc. + сам Дэн Абрамов говорил о таком подходе. (HolyJS 2020)

Answer 4

[Алексей]

Про редакс уже все сказали, часто есть необходимость использовать useState при наличии redux и это нормально.

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

let matches = {
  ",": "",
  "в": "В",
  "с": "С",
  " г.": ""
}

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

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

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