Невозможно соединить несколько компонентов, используя приставку в реагировать - PullRequest
Новая
       46

Невозможно соединить несколько компонентов, используя приставку в реагировать

0 голосов
/ 24 мая 2018

Я не могу понять, как соединить два разных компонента с магазином redux.

Вот что я попробовал:

View.js 

import React from 'react';
import {View, Text, Button} from 'react-native';
import {Actions} from 'react-native-router-flux';

export default ({counter,actions:{ incrementCounter}}) => (
<View>
<Text>Hello from page 1</Text>
<Button
  title='Go to page 2'
  onPress={() => Actions.page2({})}
/>
<Button
  title='Go to page 3'
  onPress={() => Actions.page3({})}
/>
<Button
  title='INCREMENT'
  onPress={() => incrementCounter()}
/>
<Text>{counter}</Text>

);

Page2.js 

import React from 'react';
import { 
 View,
 Text,
 Button,
} from 'react-native';

import { Actions } from 'react-native-router-flux';
import { incrementCounter } from '../actions';

export default ({counter,actions:{ incrementCounter}}) => (
  <View>
    <Text>Hello from page2</Text>
    <Button 
      title='Go to Page 1'
      onPress={() => Actions.page1({})} />
    <Button 
      title='Go to Page 3'
      onPress={() => Actions.page3({})} />

    <Button
     title='Increment'
     onPress={() => incrementCounter()}
    />
  <Text>{counter}</Text>
  </View>

);

index.js 

import React,{Component} from 'react';
import {View ,div} from 'react-native';

import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import Page1 from './View'
import Page2 from '../Page2'
import * as actionCreators from '../../actions';


class AllComp extends Component{
 render(){
     const {counter, actions} = this.props;
     return(
      <View>
       <Page1 counter={counter} actions={actions} />
       <Page2 counter={counter} actions={actions}/>
      </View>
    )
  }
}

function mapStateToProps(state){
  return{
    counter:state.counter,
  }
}

function mapDispatchToProps(dispatch){
  return{
    actions: bindActionCreators(actionCreators, dispatch)
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(AllComp);

Вывод, полученный после выполнения кода, немного странный.

Он отображает содержимое обеих страниц (View.js и Page2.js) на одной и той же странице.

Я прочитал, что для соединения нескольких компонентов мне нужно объединить эти компоненты в одну, и я сделалтоже самое.Но, как я сказал ранее, результат был немного странным.

1 Ответ

0 голосов
/ 24 мая 2018

Вы создали одно представление, включающее две страницы, 

  <View>
   <Page1 counter={counter} actions={actions} />
   <Page2 counter={counter} actions={actions}/>
  </View>

По этой причине обе ваши страницы отображаются на одном экране.React-native-router-flux Документация гласит, что маршруты должны быть указаны в вашем App.js как, 

const App = () => (
  <Router>
    <Stack key="root">
      <Scene key="page1" component={Page1} title="Page 1"/>
      <Scene key="page1" component={Page2} title="Page 2"/>
    </Stack>
  </Router>
);

. Чтобы подключить несколько компонентов к Redux, вам не нужно заключать их в один и тот же компонент, вместонеобходимо connect их преобразовать, используя следующие функции, к которым всегда нужно подключать компонент. 

function mapStateToProps(state){
  return{
    counter:state.counter,
  }
}

function mapDispatchToProps(dispatch){
  return{
    actions: bindActionCreators(actionCreators, dispatch)
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Page1);
...