使用redux in react native无法连接多个组件

问题描述

我无法理解如何使用 redux 商店连接两个不同的组件。

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

以下是我试过的：

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.

它在同一页面中显示两个页面（View.js和Page2.js）的内容。

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.

推荐答案

您创建了一个包含两个页面的单个视图，

You have created a single view including two pages,

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

这就是两个页面在同一个屏幕上显示的原因。
React-native-router-flux 指出路由应在 App.js 中指定为，

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

要将多个组件连接到redux，您不必将它们包装在同一个组件中，而是必须连接使用以下函数将它们连接到redux，其中包含必须连接的组件。

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

这篇关于使用redux in react native无法连接多个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！