react native 學習筆記-----理解redux的一個極其簡單例子
阿新 • • 發佈：2019-01-31
'use strict';
import React, { Component, PropTypes} from 'react';
import {
StyleSheet,
Text,
View,
Image,
Button,
AppRegistry,
TouchableHighlight
} from 'react-native';
import { createStore } from 'redux';
/*
* auth:andy
*/
class Counter extends Component {
static propTypes = {
value: PropTypes.number.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired,
}
render() {
const { value, onIncrement, onDecrement } = this.props
console.log(value);
//view
return (
<View style={{ alignItems: 'center', }}>
<TouchableHighlight onPress={onIncrement}>
<Text style={{ fontSize: 20, margin:5}}>Tap me to ++</Text>
</TouchableHighlight>
<TouchableHighlight onPress={onDecrement}>
<Text style={{ fontSize: 20,margin:5 }}>Tap me to -- </Text>
</TouchableHighlight>
<View style={styles.numberContainer}>
<Text style={styles.number} >{value}</Text>
</View>
</View>
);
}
}
//reducer函式，state預設值是0
function counter(state = 0, action) {
//根據傳進來的action改變state的值
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
//傳入reducer函式建立store
const store = createStore(counter);
export default class movie_redux extends Component {
constructor(props) {
super(props)
this.state = {
value: 0,
}
}
componentDidMount = () => {
//設定監聽，當store的state值更新，重新整理render
store.subscribe(() =>
this.setState({ value: store.getState() }));
}
render() {
return (<Counter
value={this.state.value}
onIncrement={() => store.dispatch({ type: 'INCREMENT' }) }
onDecrement={() => store.dispatch({ type: 'DECREMENT' }) }
/>
);
}
}
const styles = StyleSheet.create({
numberContainer: {
height: 150,
justifyContent: 'center',
alignItems: 'center',
},
number: {
fontSize: 36,
color:'deeppink',
justifyContent: 'center',
alignItems: 'center',
},
});
AppRegistry.registerComponent('movie_redux', () => movie_redux);
import React, { Component, PropTypes} from 'react';
import {
StyleSheet,
Text,
View,
Image,
Button,
AppRegistry,
TouchableHighlight
} from 'react-native';
import { createStore } from 'redux';
/*
* auth:andy
*/
class Counter extends Component {
static propTypes = {
value: PropTypes.number.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired,
}
render() {
const { value, onIncrement, onDecrement } = this.props
console.log(value);
//view
return (
<View style={{ alignItems: 'center', }}>
<TouchableHighlight onPress={onIncrement}>
<Text style={{ fontSize: 20, margin:5}}>Tap me to ++</Text>
</TouchableHighlight>
<TouchableHighlight onPress={onDecrement}>
<Text style={{ fontSize: 20,margin:5 }}>Tap me to -- </Text>
</TouchableHighlight>
<View style={styles.numberContainer}>
<Text style={styles.number} >{value}</Text>
</View>
</View>
);
}
}
//reducer函式，state預設值是0
function counter(state = 0, action) {
//根據傳進來的action改變state的值
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
//傳入reducer函式建立store
const store = createStore(counter);
export default class movie_redux extends Component {
constructor(props) {
super(props)
this.state = {
value: 0,
}
}
componentDidMount = () => {
//設定監聽，當store的state值更新，重新整理render
store.subscribe(() =>
this.setState({ value: store.getState() }));
}
render() {
return (<Counter
value={this.state.value}
onIncrement={() => store.dispatch({ type: 'INCREMENT' }) }
onDecrement={() => store.dispatch({ type: 'DECREMENT' }) }
/>
);
}
}
const styles = StyleSheet.create({
numberContainer: {
height: 150,
justifyContent: 'center',
alignItems: 'center',
},
number: {
fontSize: 36,
color:'deeppink',
justifyContent: 'center',
alignItems: 'center',
},
});
AppRegistry.registerComponent('movie_redux', () => movie_redux);