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

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

В значительной степени это произошло потому, что я использовал Redux единственным способом, которым меня учили, используя connect и mapStateToProps. С помощью этого метода объекты из хранилища вызываются в функции mapStateToProps, а затем добавляются как обычные реквизиты для компонента. Это работает, но каждый раз при доступе к магазину мне приходилось писать что-то похожее на это внизу компонента:

const mapStateToProps = (state) => {
  return {
    propOne: state.propOne,
    propTwo: state.propTwo,
    propThree: state.propThree,
    propFour: state.propFour,
    propFive: state.propFive,
    };
};
export default connect(mapStateToProps)(MyComponent);

Казалось, что работы больше, чем она того стоила! Просто доступ к нескольким объектам состояния значительно удлинил бы мой код. Кроме того, он не самый читаемый или понятный для других разработчиков.

Улучшение

Все изменилось, когда я узнал о крючке useSelector(). В то время я работал над личным проектом, который разместил на Reddit с просьбой посоветоваться. Мне повезло, кто-то увидел метод mapStateToProps, который я использовал, и предложил альтернативу.

С помощью useSelector() вы можете вызывать пропсы из магазина одной строкой, например так:

const exampleProp = useSelector((state) => state.exampleProp);

Это намного чище и намного проще для понимания другими. Сразу же я вернулся и провел рефакторинг всего своего проекта.

Кроме того, вместо сложного метода connect вы также можете использовать хук useDispatch() для внесения изменений в состояние. После импорта он работает так же просто, как это:

const dispatch = useDispatch();
const handleClick = () => {
   dispatch(myAction());
};

Если вы использовали connect, эта простота замечательна.

И это все! С useSelector() и useDispatch() доступ и изменение магазина Redux очень просты. :)