Подключение нескольких компонентов к хранилищу React Redux

Question

Я только недавно начал работать с Redux, и мне удалось подключить свой компонент <App /> к магазину с помощью этого кода:

const mapStateToProps = state => ({
    ...state,
});

const mapDispatchToProps = dispatch => ({
    writeSomething: () => dispatch(writeSomething),
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

Это довольно просто, когда я нажимаю кнопку, вызывается метод writeSomething и оно превращает ложь в истину, и это прекрасно работает.

Но затем я захотел подключить остальные мои компоненты к магазину и заметил, что мне нужно скопировать весь код и вставить туда, а затем я также должны импортировать что-то написать. Это выглядит очень многократно и не весело, поэтому должен быть лучший способ сделать это, верно? Я искал вокруг и не смог найти то, что искал, поэтому мне интересно: есть ли на самом деле более простой и быстрый способ подключения к магазину или мне нужно копировать / вставлять свой код для каждого компонента, который я хочу подключиться к магазину приставок?

Answer 1

вы можете использовать HO C, чтобы избежать повторения в коде, или вы можете также использовать пользовательские хуки.

Answer 2

Почему бы не попробовать крючки. Реакт-редукс имеет хуки, которые называются useDispatch, useSelector. useDispatch отправит и действие, в то время как useSelector будет получать состояние. Делать крючки - это весело.

https://levelup.gitconnected.com/react-redux-hooks-useselector-and-usedispatch-f7d8c7f75cdd

С этим вы получите более чистый и организованный код.

Answer 3

Да, я думаю, что это структура, которой мы должны следовать, но вы можете использовать контекст для предотвращения этого или вы можете использовать HO C, чтобы избежать дублирования