Межкомпонентная коммуникационная архитектура с Apollo, Graphql - PullRequest
Новая
       13

Межкомпонентная коммуникационная архитектура с Apollo, Graphql

0 голосов
/ 18 мая 2018

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

Предположим, вы создаете мастер форм с несколькими шагами, который должен отправить соответствующую форму впри нажатии следующей кнопки: 

 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={...}>
    }
 }

При отправке графической мутации с входными данными из текущей формы должен быть запущен.Идеологически код отправки для текущей формы принадлежит соответствующему Formcontainer.Но действие submit Действие снаружи.

Каков наилучший способ решения такой межкомпонентной связи с apollo и apollo-link-state?

Или это что-то за пределами аполлона?Если да, то как реагируют некоторые идиоматические решения?

Redux также не решает эту проблему.Можно поместить состояние форм в центральное хранилище, но отправка - это всегда другое действие.

1 Ответ

0 голосов
/ 25 мая 2018

Последние дни, проведенные именно на этом, заставили меня многое узнать о React, которого я не знал, и время было хорошо проведено.У меня есть одно состояние React в верхнем / родительском компоненте, в котором хранятся действия, передаваемые дочерним элементам.Самая большая проблема заключалась в том, чтобы найти способ распространения действия, React Context хорош для больших расстояний, но я в основном пропускаю его через подпорки.

В этом случае принимающий компонент должен быть класса, чтобы он мог анализировать действие в SCU ирешить, приведет ли действие к некоторому повторному действию (чаще всего рендеринг).

Я не думаю, что вам следует копировать решения, но вместо этого сделайте это самостоятельно и используйте его, чтобы изучить глубину реакции, я обещаю вам, что это будетрасплатиться!

Сказав, что вы должны начать с этим. 

  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
   ...
...