无法在 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 中使用 redux 连接多个组件
无法在 react native CLI 中运行 npx react-native init MyApp
无法在 React-native 中使用 127.0.0.1 从获取请求中获取响应