Intégration de relais avec Redux dans React natif App

Question

Je suis nouveau à l'application react-native.My utilise actuellement Redux, react-redux,router flux & navigateur.

L'extrémité arrière avec laquelle je dois travailler est GraphQL. Qu'est-ce que je devrais faire maintenant? Puis-je intégrer Relay à mon application sans affecter quoi que ce soit lié à redux ou devrais-je rejeter Redux et utiliser relais ?. Qu'en est-il de lokka? Vraiment confus !! Quelqu'un peut-il m'aider avec des exemples de code ou tout ce qui est lié à ce problème?

Merci à l'avance :)

Answer 1

J'utilise le relais et Redux dans la même application sans beaucoup (je n'ai pas de jusqu'à aujourd'hui) les questions (l'application sera en production après quelques semaines). Je pourrais expliquer comment je l'ai réalisé. (Je suis aussi nouveau-natif-réactif et Js développement, je ne prétends pas que la meilleure approche, mais au moins cela fonctionne pour moi comme je l'ai prévu)

Mise en place de relais et graphQL a presque pris une journée d'effort . Pour cette utilisation commandes suivantes: -

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 

puis créez un fichier nommé babelRelayPlugin.js et copiez le code ci-dessous.

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

et remplacer le code de votre .babelrc avec ceci: -

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

classes suivantes peuvent avoir besoin d'utiliser cette déclaration d'importation: -

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

Et mon regard de fichier app.js comme: -

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

Après l'injection de la couche réseau relais, vous pouvez utiliser le code suivant dans tous les conteneurs pour appeler depuis le relais. Voici un exemple de rendre la méthode d'un de mes conteneurs: -

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

les relay_route.js devraient ressembler à

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

Et Mon TestComponent ressemble à: -

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

Pour des doutes sur le relais, this documentation est chic pour nous aider