Cannot connect multiple components using redux in react native

Question

I am not able to understand how to connect two different components with the redux store.

Following is what I tried:

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

The output I received after running the code is a bit weird.

It display the contents of both the pages (View.js and Page2.js) in the same page itself.

I read that to connect multiple components I have to wrap those components into one and I did the same thing. But as I said earlier the output was a bit weird.

That it displays the contents of both the pages in the same page. But it shouldn't have. As View.js page has a button named page 2 that routes us to page 2. But whats happening is that the data in page 2 is being displayed in view.js page itself. — Shepherd_of_fire
– Shepherd_of_fire, Commented May 24, 2018 at 10:01

Isaac · Accepted Answer · 2018-05-25 01:27:16Z

You have created a single view including two pages,

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

This is the reason both of your pages are being displayed in the same screen. React-native-router-flux documentation states that the routes should be specified in your App.js as,

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

To connect multiple component to redux you dont have to wrap them in same component instead you have to connect them to redux using the following functions in which ever component you have to connect.

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

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

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

Collectives™ on Stack Overflow

Cannot connect multiple components using redux in react native

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related