Избегайте ненужного детализации реквизита, поддерживая глобальное хранилище данных.
В первый раз, когда я изучил 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 очень просты. :)