Интеграция реле с Redux в React Native App

Question

Я новичок в react-native.My приложения в настоящее время использует Redux, react-redux,router flux & навигатор.

Задняя часть, с которой мне нужно работать, - GraphQL. Что мне теперь делать?

Могу ли я интегрировать Relay в свое приложение, не затрагивая ничего, связанного с сокращением, или должен ли я сбросить редукцию и использовать реле ?. Как насчет lokka? На самом деле путают !! Может ли кто-нибудь помочь мне с примерами кода или чем-либо, связанным с этой проблемой?

Заранее спасибо :)

Answer 1

Я использую реле и Redux в одном приложении, не очень (я не имею любой до сегодняшнего дня) вопросов (приложение будет находиться в производстве после нескольких недель). Я мог бы объяснить, как я это достиг. (Я также новичок в разработке и разработке Js, я не претендую на это как на лучший подход, но, по крайней мере, он работает для меня, как я и предполагал)

Настройка реле и графика почти заняла день усилий , Для этого используйте следующие команды: -

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 документация классная, чтобы помочь нам