Javascript 无法在react native中使用redux连接多个组件
我无法理解如何将两个不同的组件连接到redux商店 以下是我尝试过的: View.jsJavascript 无法在react native中使用redux连接多个组件,javascript,react-native,redux,react-redux,jsx,Javascript,React Native,Redux,React Redux,Jsx,我无法理解如何将两个不同的组件连接到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> <
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>
;
第2.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);
我在运行代码后收到的输出有点奇怪
它在同一个页面中同时显示pages View.js和Page2.js的内容
我读到,要连接多个组件,我必须将这些组件包装成一个组件,我也做了同样的事情。但正如我前面所说,输出有点奇怪。您创建了一个包含两个页面的单一视图
<View>
<Page1 counter={counter} actions={actions} />
<Page2 counter={counter} actions={actions}/>
</View>
要将多个组件连接到redux,您不必将它们包装在同一个组件中,而是必须使用以下函数将它们连接到redux,您必须在其中连接任何组件
function mapStateToProps(state){
return{
counter:state.counter,
}
}
function mapDispatchToProps(dispatch){
return{
actions: bindActionCreators(actionCreators, dispatch)
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Page1);
什么是wierdness?它在同一个页面中显示两个页面的内容。但它不应该这样。As View.js页面有一个名为page 2的按钮,将我们路由到page 2。但是,第2页中的数据显示在view.js页面中。
function mapStateToProps(state){
return{
counter:state.counter,
}
}
function mapDispatchToProps(dispatch){
return{
actions: bindActionCreators(actionCreators, dispatch)
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Page1);