I'm having trouble figuring out how to connect two different components using the redux store.
Here's what I've attempted:
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>
</View>
);
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 result I got after running the code is a bit unexpected.
It shows the content of both View.js and Page2.js on the same page.
I learned that in order to connect multiple components, I need to wrap them into one, which I did. However, the output turned out differently than expected.