Cannot connect multiple components using redux in react native

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/50505744/cannot-connect-multiple-components-using-redux-in-react-native

标签

javascript

react-native

redux

react-redux

jsx