如何在 Redux Reducer 中使用 GraphQL Mutations

Question

我在这里有一个 react 无状态函数，我很想从我的 reducer 中调用我的突变。请注意，在 React.Component 类中调用突变是通过在组件中添加一个函数来实现的，我不希望这样，我想使用我的 reducer 来做到这一点。

通过最少的代码示例，我将展示我的设置

// index.js render function


[...] // imported variables

<ApolloProvider client={client}>
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <App />
      </div>
    </ConnectedRouter>
  </Provider>
</ApolloProvider>

// Mutation
const Foo = gql`
  mutation Foo($id: String) {
    AddBar(id: $id) {
     id
    }
  }
`;

// Component
[...] // other imports for below variables
const Comp = (props) => (
  <div>
    <button onClick={() => props.addFoo(props)}>Click</button>
  </div>
)

const mapDispatchToProps = dispatch => bindActionCreators({
  addFoo
}, dispatch)

export default connect(
 mapDispatchToProps
)(graphql(Foo)(Comp))

// Reducer (very slimmed with just the action)

export const addFoo = (props) => {

 // props contained the mutate function 
 props.mutate({

   variables: {id: "1" }

 })

  // dispatch goes here but not needed.

}

好的，我已经尽可能地精简了这个例子。我的问题是我的变量没有传递给我的变异函数。如果我用一个硬编码id 并单击按钮，graphql 会更改我的数据（是的），但唯一的问题是变量没有传递。在检查器中，我确实看到了具有正确值的变量，但......没有传递给 mutate 函数。

Answer 1

一些想法......

首先，reducer 永远不应该改变数据或进行异步调用。它们应该是没有副作用的纯函数。

暂时不考虑 GraphQL，并假设您只有一个 REST 调用，您通常会在 Action Creator 或类似的东西中进行变异。 Redux 中的 Action Creator 本质上是同步的，因此您可以使用 Redux Thunks 或 Redux Sagas（或类似的东西）来帮助实现这一点。

好的，让我们把 GraphQL 放回去。正如您所指出的，如果您在组件中包含突变，则很难将其连接到您的 Redux 实现中。两者有点相互排斥。在您的 Redux 实现中，您通常会进行异步 fetch 调用，但您可以使用 Apollo 客户端，而无需 React to mutate...

const apolloClient = createApolloClient();
apolloClient.mutate({mutation: Foo}).then(handleResult)

现在，createApolloClient() 做了什么？您不想每次都创建一个新的。该客户端维护一个缓存，并且可以处理来自重用客户端的所有增值。这适用于 React 代码。您希望从 React 绑定执行的任何查询都使用您在 Redux 操作创建器中使用的相同客户端。 createApolloClient() 函数需要创建一个客户端单例并将其返回，以便您也可以在 ApolloProvider 中使用它：

<ApolloProvider client={createApolloClient()}>

我希望这会有所帮助！