Я использую relay и redux в одном и том же приложении без особых проблем (у меня их нет до сегодняшнего дня) (приложение будет запущено через несколько недель). Я мог бы объяснить, как я этого добился. (Я также новичок в разработке реактивов и 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
}
`
}
})
Если у вас есть сомнения относительно ретрансляции, эта документация поможет вам нас
person
Ansal Ali
schedule
04.11.2016