在 React Native 应用程序中将 Relay 与 Redux 集成

Posted 2023-03-08

【中文标题】在 React Native 应用程序中将 Relay 与 Redux 集成

【英文标题】：Integrating Relay with Redux in React Native App

【发布时间】：2017-03-13 10:01:35

【问题描述】：

我是 react-native 的新手。我的应用程序目前使用 redux,react-redux,router flux & navigator。

我需要使用的后端是 GraphQL。我现在该怎么办？

我可以将 Relay 集成到我的应用程序而不影响与 redux 相关的任何内容，还是应该转储 redux 并使用中继？ lokka 呢？真的很迷茫！！有人可以帮我提供代码示例或与此问题相关的任何内容吗？

在此先感谢 :)

【问题讨论】：

我的想法是你不需要所有的图形数据......例如消息传递组件 - 使用 REST api 获取初始消息然后使用 web sockets 是有意义的在那之后得到任何东西；每条消息都会附加到商店。

【参考方案1】：

我在同一个应用程序中使用 relay 和 redux 没有太多问题（直到今天我还没有）问题（应用程序将在几周后投入生产）。我可以解释我是如何实现它的。 （我也是新的 react-native 和 Js 开发，我不认为这是最好的方法，但至少它对我有用）

relay 和 graphQL 的设置几乎花费了一天的时间。为此，请使用以下命令：-

npm install babel-core --save-dev
npm install babel-preset-react-native --save-dev
npm install babel-relay-plugin --save-dev
npm install react-relay --save
npm install graphql --save-dev
npm install sync-request --save-dev

然后创建一个名为babelRelayPlugin.js 的文件并复制以下代码。

const getBabelRelayPlugin = require('babel-relay-plugin')
const introspectionQuery = require('graphql/utilities').introspectionQuery
const request = require('sync-request')

const url = 'your_api_here'

const response = request('POST', url, 
  qs: 
    query: introspectionQuery
  
)

const schema = JSON.parse(response.body.toString('utf-8'))

module.exports =  plugins: [getBabelRelayPlugin(schema.data,  abortOnError: true )] 

并将 .babelrc 中的代码替换为：-

  "passPerPreset": true,
  "presets": [
    "./scripts/babelRelayPlugin",
    "react-native"
  ]

以下类可能需要使用此导入语句：-

import Relay, 
  Route,
  DefaultNetworkLayer
 from 'react-relay'

我的 App.js 文件看起来像：-

  function configureStore(initialState)
      const enhancer = compose(applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
        ),
        autoRehydrate()
      );

        return createStore(reducer,initialState,enhancer);
    

    const store = configureStore();
    persistStore(store, storage: AsyncStorage)
    ////relay network layer injecting
    Relay.injectNetworkLayer(new DefaultNetworkLayer('your_api'))
    export default class App extends Component 
      render() 
        return (
          <Provider store=store>
            //here is your react-native-router-flux Navigation router
            <NavigationRouter/>
          </Provider>
        );
      
    

注入中继网络层后，您可以在任何容器中使用以下代码从中继调用。这是我的一个容器的示例渲染方法：-

render() 
    var value = 'some_value';
    return (
      <View style=flex:1,justifyContent:'center',alignItems:'center'>
        <Relay.RootContainer
        Component=TestComponent
        //relay_route is imported from relay_route.js
        route=new relay_route(id:value)
        renderFetched=(data)=> 
          return (
            <TestComponent parentProps=this.props ...data />
          );
        />
      </View>
    ); 

relay_route.js 应该类似于

class relay_route extends Route 
  static paramDefinitions = 
    userID:  required: true 
  
  static queries = 
    user: () => Relay.QL`
      query  
        user(id: $userID)
      
    `
  
  static routeName = 'UserRoute'

我的 TestComponent 看起来像：-

class TestComponent extends Component 
  render () 
    const user = this.props.user
    return (
      <Text>name: user.name</Text>
    )
  


export default TestComponent = Relay.createContainer(TestComponent, 
  fragments: 
      user: () => Relay.QL`
      fragment on User 
        id,
        name
      
    `
  
)

对于中继的任何疑问，this 文档可以帮助我们