Межкомпонентная архитектура связи с Apollo, Graphql
Часто при построении пользовательского интерфейса возникает проблема, заключающаяся в том, что компоненты пользовательского ввода визуально расположены вне компонентов, владеющих состоянием.
Предположим, вы создаете мастер форм с несколькими шагами, который должен отправить соответствующую форму при нажатии следующей кнопки:
class WizardContainer {
render(){
return
<Wizard>
<FormContainer/>
<NavigationContainer/>
</Wizard>
}
}
class NavigationContainer {
currentFromContainer(){ ... }
render(){
let FormContainer = currentFormContainer()
return <FormContainer/>
}
class WizardContainer {
render(){
return
<Navigation title = "next", onClick = {...}>
}
}
При отправке должна быть запущена мутация graphql с входными данными из текущей формы. Идеологически код отправки для текущей формы принадлежит соответствующему контейнеру форм. Но действие submit Action находится снаружи.
Каким будет лучший способ решить такую кросс-компонентную коммуникацию с apollo и apollo-link-state?
Или это что-то вне рамок Apollo? Если да, то каковы некоторые идиоматические решения реакции?
Redux тоже не решает эту проблему. Можно поместить состояние форм в центральное хранилище, но отправка - это всегда другое действие.
Ответы 1
Последние дни я потратил именно на это, и это заставило меня узнать много нового о React, которого я не знал, и потраченное время было потрачено не зря. У меня есть одно состояние React в верхнем / родительском компоненте, в котором хранятся действия, передаваемые потомкам. Самая большая проблема заключалась в том, чтобы найти способ распространения действия, React Context хорош для больших расстояний, но я в основном передаю его с помощью реквизита.
При этом принимающий компонент должен относиться к типу класса, чтобы он мог анализировать действие в SCU и решать, приводит ли действие к какому-либо ответному действию (чаще всего к рендерингу).
Я не думаю, что вам следует копировать решения, но вместо этого сделайте это самостоятельно и используйте его, чтобы изучить глубину React, я обещаю вам, что это окупится!
Сказав, что вам следует начать с этого.
constructor() {
super()
this.state = {
dispatch: this.dispatch,
type: null,
payload: null
}
}
dispatch = (type, payload) => {
switch (type) {
case "user_set":
setApolloCache({ userId: payload.userId })
this.setState(prevState => ({
dispatch: prevState.dispatch,
type,
payload
}))
break
...