基于Apollo、Graphql的跨组件通信架构

Question

在构建UI时，经常会出现这样的问题:用户输入组件在视觉上位于拥有状态的组件之外。

假设您正在构建一个包含多个步骤的表单向导，该向导必须在单击next按钮时提交相应的表单：

 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突变。从理论上讲，当前表单的提交代码属于各自的Formcontainer。但是提交操作在外部。

用apollo和apollo-link-state解决这种跨组件通信的最好方法是什么？

还是说这超出了阿波罗的范围？如果是这样的话，哪些是react惯用的解决方案？

Redux也不能解决这个问题。可以将表单的状态放到中央存储中，但提交始终是一个不同的操作。

Answer 1

在过去的几天里，我一直在做这件事，这迫使我学习了很多我不知道的关于React的知识，这段时间是值得的。我在top/parent组件中有一个单独的React状态，它存储要传递给子组件的操作。最大的问题是找到一种方法来传播动作，React上下文适用于更长的距离，但我主要通过道具来传递它。

然后，接收组件必须是类类型，以便它可以分析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
   ...