描述该做啥?(action)!具体怎么做(reducer)!统一规划(store:包含reducer+所有的state)
上代码:index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import { Provider } from 'react-redux';
import {createStore} from 'redux';
import APP from './app';
//创建reducer,传入初始化的状态,和需要改变的元素描述:action
//初始化状态
const initialState={defaultNum:10};
function add(state=initialState,action){
console.log("2"+action.type);
switch (action.type) {
case "ADD_ONE":
let ss=Object.assign({},state,{defaultNum:state.defaultNum-1})
return ss;
default:
return state;
}
}
class test extends Component{
constructor(props){
super(props);
this.state={
store:createStore(add),
};
}
render(){
return(
<Provider store={this.state.store}>
<APP store={this.state.store}/>
</Provider>
);
}
}
AppRegistry.registerComponent('test', () => test);
在上面的入口代码中,先是定义了reducer,来具体做一些事,用reducer作为参数来创建store,然后通过Provider来将store传入入口<APP/>组件中!然后看APP.js的代码:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import {connect} from 'react-redux';
//action
let action={type:"ADD_ONE"};
class APP extends Component {
constructor(props){
super(props);
this.state={
}
}
_onpress(){
console.log("1"+this.props.defaultNum);
this.props.dispatch(action);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text} onPress={this._onpress.bind(this)}>{this.props.defaultNum}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text:{
fontSize:40
}
});
function select(state){
console.log("3"+state.defaultNum);
return {defaultNum:state.defaultNum}
}
export default connect(select)(APP)
在APP.js代码中,我们首先定义了action(当然这些都是可以在外部写的) 然后通过文本的点击事件触发action,将这个action通过store中的dispatch分发到reducer中!那么
export default connect(select)(APP)
就是包装APP组件,将store的dispatch方法传入this.props中!
当reducer运行结束后,返回的数据由
export default connect(select)(APP)
中的select来更新当前的数据。
相关链接:http://www.jianshu.com/p/e261818be3ff