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

Posted

技术标签:

【中文标题】无法在 react native 中使用 redux 连接多个组件【英文标题】:Cannot connect multiple components using redux in react native 【发布时间】:2018-11-03 11:15:02 【问题描述】:

我无法理解如何将两个不同的组件与 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)的内容显示在同一页面本身中。

我读到要连接多个组件,我必须将这些组件包装成一个组件,并且我做了同样的事情。但正如我之前所说,输出有点奇怪。

【问题讨论】:

什么是怪异? 它在同一页面中显示两个页面的内容。但它不应该。由于 View.js 页面有一个名为 page 2 的按钮,该按钮将我们路由到第 2 页。但是发生的是第 2 页中的数据正在显示在 view.js 页面本身中。 【参考方案1】:

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

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

这就是您的两个页面都显示在同一屏幕上的原因。 React-native-router-flux documentation 声明路由应该在你的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);

【讨论】:

以上是关于无法在 react native 中使用 redux 连接多个组件的主要内容,如果未能解决你的问题,请参考以下文章

无法在我的项目中解析“react-native”

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

无法在 react native CLI 中运行 npx react-native init MyApp

无法在 React-native 中使用 127.0.0.1 从获取请求中获取响应

我无法在带有 redux 的 react-native 中使用地理定位

React Native Push Notification - react-native-fcm - ios无法构建