Relais mit Redux Integration Reagieren native App

Question

ich react-native.My Anwendung bin hier verwendet derzeit redux, react-redux,router flux & Navigator.

Das Backend, mit dem ich arbeiten muss, ist GraphQL. Was sollte ich jetzt tun?

Kann ich Relay in meine App integrieren, ohne dass irgendetwas in Bezug auf redux betroffen ist, oder sollte ich Redux dump und relay verwenden ?. Was ist mit lokka? Wirklich verwirrt !! Kann mir jemand mit Codebeispielen oder irgendetwas zu diesem Thema helfen?

Vielen Dank im Voraus :)

Answer 1

Ich benutze Relais und redux in derselben Anwendung ohne viel (ich nicht jede bis heute) Ausgaben (die App in der Produktion nach wenigen Wochen sein wird). Ich könnte erklären, wie ich es geschafft habe. (Ich bin auch neue Reaktion-native und Js Entwicklung, ich behaupte dies nicht als die beste Vorgehensweise, aber zumindest funktioniert es für mich, wie ich es vorhabe)

Einrichten von Relay und GraphQL dauerte fast einen Tag der Anstrengung . Für diese Verwendung folgenden Befehle: -

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 

dann eine Datei erstellen babelRelayPlugin.js und kopieren Sie den Code unten genannt.

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 })] } 

und ersetzen Sie den Code Ihrer .babelrc mit diesem: -

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

folgenden Klassen müssen diese Import-Anweisung verwenden: -

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

Und meine App.js Datei Blick wie: -

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> 
     ); 
     } 
    } 

Nach dem Injizieren der Relay-Netzwerkschicht könnten Sie den folgenden Code in allen Containern verwenden, um von Relay anzurufen. Hier ist ein Beispiel Render-Methode von einem meiner Behälter: -

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> 
    ); 

die relay_route.js etwas aussehen sollte

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

And My Testcomponent wie folgt aussieht: -

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 
     } 
    ` 
    } 
}) 

Für irgendwelche Zweifel in Bezug auf Relais, this Dokumentation ist stilvoll, um uns zu helfen